jQuery 1.4 Animation Techniques - Index of

[ 25 ]
Chapter 2
Most of the styles we used in this example are purely for the layout and appearance of this
example and can be changed to suit your implementational requirements. What's important
is that the hover states for the navigation links are provided using the class name pure-css
attached to the outer element.
We do use a CSS3 style in this example, which some readers may not be familiar with. We'll
be looking at CSS3 in much more detail towards the end of the book but, we'll cover this one
for the benefit of those that have not used it before.
The CSS3 style we used was the border-radius style, which gives the element rounded
corners in supporting browsers. Few browsers currently support the true border-radius
CSS3 style property (at the time of writing, only Opera supports this style property natively),
but Firefox and Webkit-based browsers do support it with their vendor-prefixes, -moz- and
–webkit- respectively.
Internet Explorer 8 and below do not support the border-radius style property, or any
variant of it, and these browsers do not provide their own vendor-prefixes to use. However,
the menu itself and the example code, still work perfectly in these browsers. The only
difference is, they have square corners and not rounded ones.
If this is acceptable, then everything is fine, and you have super-simple rounded corners
without the additional HTTP request(s) and payload that images would require in supporting
browsers. If rounded corners are critical to your application or interface, we can always
provide these to IE using conditional comments.
Time for action – scripting the animation
Now we just need to add the script that will animate our simple navigation menu.
1. Add the following code within the anonymous function at the bottom of
the :
var ul = $("nav ul");
ul.removeClass("purecss");
ul.find("a").each(function(){
var a = $(this);
a.append("" + a.text() + "");
});
ul.find("a").hover(function() {
$(this).find("span").fadeIn("slow");
}, function() {
$(this).find("span").hide();
});