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>

当我单击一次时，代码可以工作，在第二次单击后，.mouseenter带有.animate()和 的.css()功能不再起作用，但是console.log()可以运行。为什么？

在此处将其视为示例：http: //liebdich.biz/。

4

1 回答 1

1

Every time you click you add a new copy of your event handlers for mouseenter and mouseleave so you then have multiple copies of them running at the same time. That will cause problems.

If you describe what you're trying to achieve and show the relevant HTML, we could probably suggest a correct way to do this.

If you just want the behavior to start on first click, then you can probably do this:

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

I've made several changes here:

  1. The event handlers are only ever installed just once on each object
  2. They are only installed on the parent of the item we clicked on (not all items in the apge)
  3. I added .stop() to the animations so animations won't pile up if the mouse is moved quickly
  4. Use event chaining for calling multiple methods on the same jQuery object
于 2013-10-27T08:52:29.620 回答