4

これは、ホバー時にメニュー項目を非表示/表示する私のjsメニューです...次のようなメニューがあります:

    <ul class="main">
        <li class="acro_jq_menu">
            <a href="" title="How to">How to one </a>
            <ul>
                <li>item21</li>
                <li>ite222m1</li>
                <li>item1</li>
            </ul>
        </li>
        <li class="acro_jq_menu">
            <a href="" title="How to">How to Two </a>
            <ul>
                <li>item1</li>
                <li>it2em1</li>
                <li>it41em1</li>
            </ul>
        </li>
   </ul>

そして、これはJavaScriptです：

function slideMenu()  {
 var items = $('.main li.acro_jq_menu');
        items.bind({
            mouseenter: function(e) {
                $(this).find('>ul').css({
                    'opacity':0
                }).show().animate(

                {
                    'opacity':1
                },
                500);
            },
            mouseleave: function(e) {
                $(this).find('>ul').fadeOut(100, function() {
                    $(this).hide();
                })
            }
        });   
}

$(document).ready(function(){
        slideMenu();
    });​

すべてが正常に機能しますが、このリスト項目内に現在のコンテンツをマウスで残すと、li非表示が長すぎて (2 秒以上)、コンテンツがまったく表示されないことがあります。jqueryコードに問題があると思いますが、理解できません。

ここに、私のコードの JSfiddle の例へのリンク: link

4

1 に答える 1

3

イベントのすべてのアニメーションを停止してみてください:

http://jsfiddle.net/6hZuV/4/

function slideMenu()  {
 var items = $('.main li.acro_jq_menu');
        items.bind({
            mouseenter: function(e) {
                $(this).stop(true, true).find('>ul').css({
                    'opacity':0
                }).show().animate(

                {
                    'opacity':1
                },
                500);
            },
            mouseleave: function(e) {
                $(this).stop(true, true).find('>ul').fadeOut(100, function() {
                    $(this).hide();
                })
            }
        });   
}
于 2013-01-04T14:32:01.177 に答える