jQuery 1.4 Animation Techniques - Index of

[ 95 ]
Chapter 4
3. Save this file as slideFlicker.css, and add a link to the file from the of
slideFlicker.html (directly after the link to fadeIn.css).
4. Finally, update the second element at the bottom of slideFlicker.
html so that it appears as follows (new code shown in bold):
var ul = $("nav ul");
ul.removeClass("purecss");
ul.find("a").each(function(){
if (!$(this).closest(".subnav").length) {
var a = $(this);
a.append("" + a.text() + "");
}
});
ul.find("a").hover(function() {
$(this).find("span").fadeIn("slow");
}, function() {
$(this).find("span").hide();
});
$(".subnav", ul).parent().mouseenter(function() {
$(this).find(".subnav").stop(true, true).slideDown("fast");
});
$(".subnav", ul).parent().mouseleave(function() {
$(this).find(".subnav").stop(true, true).slideUp("fast");
});
What just happened?
All we've done to the underlying HTML is added a couple of submenus to two of the top level
list items in the . One of the submenus is a split menu made up of two elements
inside a , the other is a single menu built from a standard .
We've also added some new styling, mostly to carry on the theme from the original example.
Some of the CSS is used to override previous rules set in the original stylesheet. Mostly the
styling is purely for aesthetics, and we use a lot of CSS3 rounded-corner styling, which will
not be apparent in all browsers.