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 <body>:
    var ul = $("nav ul");

ul.removeClass("purecss");

ul.find("a").each(function(){
  var a = $(this);
  a.append("<span>" + a.text() + "</span>");
});

ul.find("a").hover(function() {
  $(this).find("span").fadeIn("slow");
}, function() {
  $(this).find("span").hide();
});

What just happened?

The first thing we did was cache a reference to the <ul> located inside our <nav> element. We'll be referencing it several times so it is more efficient to only select it from the DOM a single time. For performance reasons, it is generally best to minimize the number of ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial