第二次单击后，jQuery不运行功能(动画，css)，但console.log有效吗? [英] jQuery does not run functions (animate, css) after second click but console.log works?

问题描述

我有此代码:

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

当我单击一次时，代码起作用，第二次单击后，带有.animate()的.mouseenter函数和.css()不再起作用，但是console.log()运行.为什么?

When I click once, the code works, after the second click, the .mouseenter function with .animate() and the .css() does not work anymore, but the console.log() runs. Why?

在此处作为示例: http://liebdich.biz/.

推荐答案

每次单击时，都会为mouseenter和mouseleave添加新的事件处理程序副本，因此您可以同时运行它们的多个副本.那会引起问题.

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.

如果您描述您要实现的目标并显示相关的HTML，我们可能会建议一种正确的方法.

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. 事件处理程序只能在每个对象上安装一次
2. 它们仅安装在我们单击的项的父项上(不是所有在apge中的项)
3. 我在动画中添加了.stop()，因此如果快速移动鼠标，动画不会堆积
4. 使用事件链在同一个jQuery对象上调用多个方法

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

这篇关于第二次单击后，jQuery不运行功能(动画，css)，但console.log有效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！