jQuery的 - 如何停止元素淡出

Question

我有一個菜單：

<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> 

每個div與數字ID爲li。

我想當鼠標指針經過李，它的div顯示。

腳本：

$(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

但問題是在這裏，在div的鼠標懸停淡出作品和隱藏股利。我如何停止淡出？

Answer 1

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

Fiddle

這是一個問題：div的鼠標懸停淡出作品和隱藏股利。我如何停止淡出？ 如果你需要隱藏的div只有當你沒有任何東西懸停，試試這個：

$(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 2

不要完全得到的問題，但是這可能會幫助您：jQuery .stop()

Answer 3

我想你想那是什麼股利變淡，但不會消失，對吧？ 所以，你要一個

fadeto() 

更多信息：

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