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

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

フィドル

これは質問です。divのマウスオーバーフェードアウトが機能し、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 2

あなたが取得したいのは、divがフェードするが消えないことだと思いますよね？だからあなたは欲しい

fadeto()

より詳しい情報：

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

Answer 3

質問はよくわかりませんが、これが役立つかもしれません: jQuery .stop()