Question

I have this snippet:

$(document).ready(function(){
$(".sidebar .nav li a.animate").hover(function(){
    $(this).animate({textIndent:"133"}, "fast")
}, function(){
    $(this).animate({textIndent:"27"}, "fast")
});
});

Basically it’s an animation for the items of the menu. It works properly, but if you pass the mouse from top to bottom and reverse multiple times, you can notice a nasty delay with the animations still going.

How can I prevent this from happening? Should I block the event after it has been triggered? What’s the best way to solve this? 🙂

Code examples are appreciated.

Answer 1

Add some stop()‘s :

$(document).ready(function(){
    $(".sidebar .nav li a.animate").on('mouseenter mouseleave', function(e){
        $(this).stop(true,true)
               .animate({textIndent: e.type=='mouseenter' ? 133 : 27}, "fast")
    });
});