Question

我在设置一个简单的下拉列表时遇到问题。如果您将鼠标悬停在链接3上并保持悬停状态，则效果很好。

问题是当您在链接3和链接4之间来回重复悬停时。然后动画有点毛刺。有些链接保持完全不透明，而其他链接为0.

我希望它完全重置鼠标输出，所以当你再次输入鼠标时它看起来很干净。有任何想法吗？我创建了一个jsfiddle。

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
    });
});

Answer 1

当用户在链接之间快速切换导致您描述的效果时，看起来补间仍然在列表项上运行。

我添加了一个TweenMax.killAll（）;在你的jsfiddle中，无论是在mouseenter的开头，还是mouseleave函数，这似乎解决了这个问题。

有关停止补间的更多详细信息：https://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/

补间最大和动画下拉菜单

1 个答案: