Question

I have this HTML code :

<ul class="menu">
    <li>Home <span class="icon home"></span><div class="clear"></div></li>
    <li class="sub">Projects <span class="icon project"></span>
        <div class="clear"></div>
        <ul class="sub-menu">
            <li>Mfrsht.com</li>
            <li>Mawsuaty.com</li>
            <li>Dzlng.com</li>
            <li>Money(Ctrl)</li>
        </ul>
    </li>
    <li>Ideas <span class="icon idea"></span><div class="clear"></div></li>
    <li>Services <span class="icon service"></span><div class="clear"></div></li>
    <li>About us <span class="icon about"></span><div class="clear"></div></li>
    <li>Contact <span class="icon contact"></span><div class="clear"></div></li>
</ul>

and this Javascript code :

$(".menu > li").not(".menu > li.sub").css( {backgroundPosition: "0px 0px", height: "30px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-167px 0px)", height: "36px"}, {duration:500})     
            })      
        .mouseout(function(){           
            $(this).stop().animate({backgroundPosition:"(0px 0px)", height: "30px"}, {duration:200, complete:function(){                $(this).css({backgroundPosition: "0px 0px"})            
            }})     
})

$(".menu > li.sub").css( {backgroundPosition: "0px 0px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-167px 0px)"}, {duration:500}) 
            })      
        .mouseout(function(){           
            $(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:200, complete:function(){                $(this).css({backgroundPosition: "0px 0px"})        
            }})     
})


$(".sub").hover(function() {
            $(this).animate({height: "150px"}, "slow", "", function () {
                $(this).children("ul.sub-menu").slideDown("slow");  
                });

    }, function() {
        $(this).animate({height: "30px"}, "slow");
        $(this).children("ul.sub-menu").slideUp("slow");    
        });

the Menu is working fine but sometimes I found it lag or there is some lateness so I want to improve it and make it better.

Note: I’m using background position plugin.

DEMO

Any suggestions? or do you think this good and no need to modify it?

Answer 1

Couple of things to consider:

1. Use mouseenter / mouseleave instead of mouseover / mouseout to actually get handlers fired when necessary (since you don’t care if muse moves cursor within area of menu item – only which item cursor entered and leaved).
2. Use .stop(true) before running new animations in event handlers. You’re already doing it in couple of places, but you’ve missed some spots (and you’re not clearing the animation queue). Try to randomly move cursor around whole menu, then stop and watch the chaos. Event handlers are firing here and there, some items are “hovering”, some items are showing submenus, just to be hidden a sec later. By passing true to stop function, you’re telling jQuery to clear animation queue for matched object.
   You might also consider using second argument for .stop(), which will tell jQuery to just go ahead and set state in which object would be after completting whole animation. That (passing that second argument) would however depend on how you tweak your code, so don’t just do that – check if that’s a desirable effect in here.