анимация и анимация в выпадающем меню - PullRequest
Новая
       115

анимация и анимация в выпадающем меню

0 голосов
/ 07 мая 2018

У меня проблема с анимацией простого выпадающего меню. Если вы наведите курсор мыши на ссылку 3 и остаетесь зависать, это прекрасно работает.

Проблема заключается в том, что при наведении курсора назад и вперед между ссылкой 3 и ссылкой 4 несколько раз. Потом анимация немного глюкает. Некоторые ссылки остаются в полной непрозрачности, в то время как другие равны 0.

Я бы хотел, чтобы он полностью сбрасывался при наведении мыши, поэтому, когда вы снова вводите мышь, она выглядит чистой. Есть идеи? Я создал jsfiddle.

https://jsfiddle.net/hbLbpzxv/2/

jQuery(function(){
    TweenMax.set(jQuery('header.main ul.nav li ul li a'), { opacity: 0, x:-50 });

    jQuery('header.main ul.nav li').on({
        mouseenter: function() { 
            var $this = jQuery(this);
            $this.addClass( "open" ); 
            TweenMax.staggerTo($this.find('ul li a'), .2, {x:0, opacity:1, delay:.15, ease:Power2.easeOut}, 0.1);
       }, 
        mouseleave: function() { 
            var $this = jQuery(this);
            $this.removeClass( "open" ); 
            //console.log( $this.find('ul li a') );

            TweenMax.to($this.find('ul li a'), .05, {x:-50, opacity:0, ease:Power2.easeOut});

            //$this.find('ul li a').css({ opacity: 0 })
            //TweenMax.set($this.find('ul li a'), { opacity: 0, x:-50 });
        }
    });

    TweenMax.set(jQuery('.hero-content'), { opacity: 0, y: 50, scale: .8 });
    TweenMax.set(jQuery('.hero-buttons'), { opacity: 0, y: 50, scale: .8 });
    TweenMax.to(jQuery('.hero-content'), 1, {
        opacity: 1,
        y: 0,
        scale: 1,
        delay: .5,
        ease: Power2.easeOut
    });

    TweenMax.to(jQuery('.hero-buttons'), 1, {
        opacity: 1,
        y: 0,
        scale: 1,
        delay: 1.2,
        ease: Power2.easeOut
    });
});

1 Ответ

0 голосов
/ 07 мая 2018

Похоже, что анимация по-прежнему выполняется в элементах списка, когда пользователь быстро переключается между ссылками, что вызывает эффект, который вы описываете.

Я добавил TweenMax.killAll (); в вашем jsfiddle, либо в начале указателя мыши, либо в функции mouseleave, и это, похоже, решило проблему.

Подробнее об остановке подростка здесь: https://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/

...