jQuery does not run functions (animate, css) after second click but console.log works?

Question

I have this code:

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

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

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?

See it as example here: http://liebdich.biz/.

Answer 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