Animation tween max和动画下拉菜单

我在设置简单下拉菜单的动画时遇到问题。如果您将鼠标悬停在链接3上并保持悬停状态，则效果非常好

问题是当您反复在链接3和链接4之间来回悬停时。然后动画出现了一点小故障。某些链接保持完全不透明度，而其他链接为0

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

---

---

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

我添加了一个TweenMax.killAll（）；在JSFIDLE中，在mouseenter或mouseleave函数的开头，这似乎解决了问题

---

关于在这里停止tween的更多详细信息：

当你在链接3和链接4之间反复来回时，它会起作用。但是，如果实际将鼠标向下移动到链接3子链接中间动画中，则会停止动画。有什么想法吗？哦，是的，鼠标移动在子项上被触发，所以动画停止。可能会给所有父菜单项指定一个特定的类，并将jquery更改为只针对该类的项，而不是所有列表项。示例：

然后是jQuery（'.section'）。在({

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