Question

I have this problem. I have sliding menu (3 levels) and when I several quick cross over menu with the mouse it sliding up and down several times. I know that jQuery function .stop() repair this but I dont know how to use it.

I have this jquery code:

$(document).ready(function(){ 
    $('menu li').hover(function() {
        $(this).find('ul.menu2').slideDown().end().find('a.prvy').css('backgroundPosition','bottom center');
        var width = $(this).find('ul.menu2').css("width");
        $(this).find('ul.menu2 li ul.menu3').css("left",width);
        $(this).find('ul.menu2>li').hover(function() {
            $(this).find('ul.menu3')).fadeIn().end().find('div.text').addClass('activ');
        }, function() {
            $(this).find('ul.menu3').fadeOut().end().find('div.text').removeClass('activ');
        });

    }, function() {
        $(this).find('ul.menu2').slideUp(300).end().find('a.prvy').css('backgroundPosition','top center');
    });
}); 

I tries somethink likes:

 $('menu li').stop(false,true).hover(function() {

OR

 $('menu li').stop(true,true).hover(function() {

But it doesnt work.

Thank you for your answers and sorry for my English.

Answer 1

You need to call stop within your hover functions.

$(document).ready(function(){ 
    $('menu li').hover(function() {
        $(this).find('ul.menu2').stop(...
    }, function() {
        $(this).find('ul.menu2').stop(...
    });
}); 

Update based on @tfbox’s other comments:

You will want to call stop with true, true since you are using fadeIn and fadeOut. If you do not want to jump to the end then you can’t use these and should instead use fadeTo.