jQuery - How to stop element fading out

Question

I have a menu:

<ul>
    <li class='1'>test1</li>
    <li class='2'>test2</li>
    <li class='3'>test3</li>
    <li class='4'>test4</li>
</ul>

<br/>
<div class='clear'></div>

<div id='1' class='sub-menu'>1111111111111</div>
<div id='2' class='sub-menu'>2222222222222</div>
<div id='3' class='sub-menu'>3333333333333</div>
<div id='4' class='sub-menu'>4444444444444</div>

Each div with number id for a li .

I would like when mouse pointer go over li, its div is shown.

script:

$(function(){
    $('li').hover(function(){
        $('.sub-menu').css('display', 'none');
        var id = '#' + $(this).attr('class');
        $(id).css('display', 'block');
    },function(){
         $('.sub-menu').delay(200).fadeOut('slow');
    });

    $('.sub-menu').hover(function(){
        $(this).css('display', 'block');
    },function(){
         $(this).delay(200).fadeOut('slow');
    });
});

Look at this

But problem is here that in div's mouseover fadeOut works and hide div. How I can stop fadeout?

Answer 1

I suppose what you want to get is that the div fades, but doesn't disappear, right? So you want a

fadeto()

More info:

http://api.jquery.com/fadeTo/

Answer 2

$('.sub-menu').hover(function(){
        $(this).stop(true,true);
        $(this).css('display', 'block');
    },function(){
         $(this).delay(200).fadeOut('slow');
    });

Fiddle

This is for the question: div's mouseover fadeOut works and hide div. How I can stop fadeout? In case you need to hide div only when you do not hover on anything, try this:

$(function(){
    $('li').hover(function(){
        $('.sub-menu').stop(true,true);
        $('.sub-menu').css('display', 'none');
        var id = '#' + $(this).attr('class');
        $(id).css('display', 'block');
    },function(){
         $('.sub-menu').fadeOut('slow');
    });

    $('.sub-menu').hover(function(){
        $(this).stop(true,true);
        $(this).css('display', 'block');
    },function(){
         $(this).fadeOut('slow');
    });
});

Fiddle

Answer 3

不太清楚这个问题，但这可能会对您有所帮助： jQuery .stop（）