0

私はこのコードを持っています:

$('.navigation a').on('click', function() {

        $('.navigation').mouseleave(function() {
            $('.navigation a').not('.bold').delay(2000).animate({opacity : 0}, 800, (function(){
                $(this).css({'visibility': 'hidden'});
            }));
        });

        $('.navigation').mouseenter(function() {
            $('.navigation a').css({visibility: 'visible'});
            $('.navigation a').animate({opacity : 1}, 800);
            console.log('asdfasd');
        });
});

html:

<div class="navigation">
    <p class="header">BLANC+ENÇENS</p>
    <ul class="list">
        <li><a alt="BLANC+ENÇENS PROFILE" href="/profile">BLANC+ENÇENS PROFILE</a></li>
        <li><a alt="BLANC+ENÇENS SERVICES" class="on2" href="/services">BLANC+ENÇENS SERVICES</a>
            <ul class="hide sub first list">
                <li class="long"><a alt="BRAND CONSULTATIONS & STRATEGY" class="keep" href="/consultations">BRAND CONSULTATIONS & STRATEGY</a></li>
                <li><a alt="STRATEGIC PARTNERSHIPS" href="/partnerships">STRATEGIC PARTNERSHIPS</a></li>
                <li><a alt="INVESTMENT" href="/investment">INVESTMENT</a></li>
                <li><a alt="SALES" href="/sales">SALES</a></li>
                <li><a alt="PR" href="/pr">PR</a></li>
            </ul>
        </li>   
        <li><a alt="BLANC+ENÇENS INSTRUCTION" class="on" href="/instruction">BLANC+ENÇENS INSTRUCTION</a>
            <ul class="hide sub first right list">
                <li class="long2"><a alt="LEGAL TERMS" class="keep" href="/terms">LEGAL TERMS</a></li>
                <li><a alt="IMPRINT" href="/imprint">IMPRINT</a></li>
                <li><a alt="DOWNLOAD" href="/download">DOWNLOAD</a></li>
            </ul>
        </li>   
        <li><a alt="EFLÈ . FERDLÈ" href="/efleferdle">EFLÈ . FERDLÈ</a></li>
    </ul>

    <ul class="animate list">
        <li><a alt="FASHION" href="/fashion">FASHION</a>
            <ul class="hide sub fashion list">
                <li><a alt="BROWNIE AND BLONDIE" href="/brownieandblondie">BROWNIE AND BLONDIE</a></li>
                <li><a alt="DIETRICH EMTER" href="/dietrichemter">DIETRICH EMTER</a></li>
                <li><a alt="LEVER COUTURE" href="/levercouture">LEVER COUTURE</a></li>
                <li><a alt="OLIVER RUUGER" href="/oliverruuger">OLIVER RUUGER</a></li>
            </ul>
        </li>
        <li><a alt="LUXURY" href="/luxury">LUXURY</a></li>
        <li><a alt="ART" href="/art">ART</a></li>
    </ul>

    <ul class="animate list lower">
        <li><a alt="INVESTORS" href="/investors">INVESTORS</a></li>
        <li><a alt="NEWS" href="/news">NEWS</a></li>
        <li><a alt="CONTACT" href="/contact">CONTACT</a></li>
    </ul>
</div>

1 回クリックすると、コードが機能し、2 回目のクリック後、.mouseenter関数と.animate()が機能し.css()なくなりますが、console.log()実行されます。なんで？

ここで例として参照してください: http://liebdich.biz/ .

4

1 に答える 1

1

クリックするたびに、mouseenter と mouseleave のイベント ハンドラーの新しいコピーを追加して、それらの複数のコピーを同時に実行します。それは問題を引き起こします。

何を達成しようとしているのかを説明し、関連する HTML を示していただければ、おそらくこれを行うための正しい方法を提案できます。

最初のクリックで動作を開始するだけの場合は、おそらく次のようにすることができます。

$('.navigation a').on('click', function() {

    // get the navigation parent
    var parent = $(this).closest('.navigation');

    // check to see if the event handlers have already been installed
    if (!parent.data("handlersInstalled")) {
        parent.mouseleave(function() {
            $('.navigation a').not('.bold').stop(true).delay(2000).animate({opacity : 0}, 800, function(){
                $(this).css({'visibility': 'hidden'});
            });
        }).mouseenter(function() {
            $('.navigation a').css({visibility: 'visible'});
            $('.navigation a').stop(true).animate({opacity : 1}, 800);
            console.log('asdfasd');
        });
        // mark that we've installed handlers
        parent.data("handlersInstalled", true);
    }
});

ここにいくつかの変更を加えました：

  1. イベント ハンドラーは、各オブジェクトに 1 回だけインストールされます。
  2. クリックしたアイテムの親にのみインストールされます (apge 内のすべてのアイテムではありません)。
  3. .stop()マウスを速く動かしてもアニメーションが重ならないようにアニメーションに追加しました
  4. 同じ jQuery オブジェクトで複数のメソッドを呼び出すためにイベント チェーンを使用する
于 2013-10-27T08:52:29.620 に答える