jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – fixing the flicker

In this section we'll see how to prevent the flicker from spoiling the animation.

1. Fixing the problem is relatively easy. Simply update the JavaScript so that it appears as follows (new code again shown in bold):

   var ul = $("nav ul"),
     timer = null;
   
   ul.removeClass("purecss");
   ul.find("a").each(function(){
     if (!$(this).closest(".subnav").length) {
       var a = $(this);
       a.append("<span>" + a.text() + "</span>");
     }
   });
   
   ul.find("a").hover(function() {
     $(this).find("span").fadeIn("slow");
   }, function() {
     $(this).find("span").hide();
   });
   
   $(".subnav", ul).parent().mouseenter(function() {
     clearTimeout(timer);
     $(this).find(".subnav").stop(true, true).slideDown("fast");
   });
   
   function closeIt(el) {
    el.stop(true, true).slideUp("fast"); ...