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 。

我想當鼠標指針越過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');
    });
});

看這個

但問題在於，在div的鼠標懸停中，fadeOut可以工作並隱藏div。 如何停止淡出？

Answer 1

我想您想得到的是div消失了，但沒有消失，對吧？ 所以你想要一個

fadeto()

更多信息：

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');
    });

小提琴

這是一個問題：div的鼠標懸停fadeOut起作用並隱藏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');
    });
});

小提琴

Answer 3

不太清楚這個問題，但這可能會對您有所幫助： jQuery .stop（）