jQuery не запускает функции (animate, css) после второго щелчка, но работает console.log?

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/.

Теги:

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. Обработчики событий устанавливаются только один раз на каждый объект
  2. Они установлены только на родителя элемента, на который мы нажали (не все элементы в apge)
  3. Я добавил .stop() в анимацию, чтобы анимация не накапливалась, если мышь перемещается быстро
  4. Используйте цепочку событий для вызова нескольких методов на одном объекте jQuery
Поделиться
  • 0
    Хорошо, я вижу, как я могу сделать это по-другому? Что затухание происходит только после первого клика? Спасибо!
  • 0
    @dollarvar - опишите, пожалуйста, все поведение, которое вы пытаетесь создать.
Показать ещё 15 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню