jQuery悬停效果-需要帮助改进此代码吗

我创建了这个jQuery效果，其中每个部分在滚动时展开并显示新内容

它工作正常，除非同时触发两个。例如，如果您快速从绿色滑动到蓝色。我相信有更好的方法来写这个。提前谢谢

$(document).ready(function() {
        $("#container-left").hover(function() {
            $('#image-right,#text-right,#text-left').fadeOut(500);
            $('#green').css({'z-index':'-2'});
            $('#container-left').animate({'width':'100%'},1000);
            $('#biz-text').fadeIn(500);

        }, function(){
            $('#image-right,#text-right,#text-left').fadeIn(500);
            $('#green').css({'z-index':'-1'});
            $('#container-left').animate({'width':'50%'},500);
            $('#biz-text').fadeOut(500);
        });


        $("#container-right").hover(function() {

            $('#image-left,#text-right,#text-left').fadeOut(500);
            $('#blue').css({'z-index':'-2'});
            $('#container-right').animate({'width':'100%','left':'0'},1000);
            $('#per-text').fadeIn(500);

        },  
           function() {
            $('#image-left,#text-right,#text-left').fadeIn(500);
            $('#blue').css({'z-index':'-1'});
            $('#container-right').animate({'width':'50%','left':'50%'},500);
            $('#per-text').fadeOut(500);

        });

}))

更新：

我在悬停后添加了.stop（），以在触发第二个动画时取消第一个动画，但理想情况下，我希望在第一个动画运行时禁用第二个动画。有没有办法做到这一点

更新代码：

$(document).ready(function() {
        $("#container-left").hover(function() {
            $("#container-right").stop();
            $('#image-right,#text-right,#text-left').fadeOut(500);
            $('#green').css({'z-index':'-2'});
            $('#container-left').animate({'width':'100%'},1000);
            $('#biz-text').fadeIn(500);

        }, function(){
            $('#image-right,#text-right,#text-left').fadeIn(500);
            $('#green').css({'z-index':'-1'});
            $('#container-left').animate({'width':'50%'},500);
            $('#biz-text').fadeOut(500);
        });


        $("#container-right").hover(function() {
            $("#container-left").stop();
            $('#image-left,#text-right,#text-left').fadeOut(500);
            $('#blue').css({'z-index':'-2'});
            $('#container-right').animate({'width':'100%','left':'0'},1000);
            $('#per-text').fadeIn(500);

        },  
           function() {
            $('#image-left,#text-right,#text-left').fadeIn(500);
            $('#blue').css({'z-index':'-1'});
            $('#container-right').animate({'width':'50%','left':'50%'},500);
            $('#per-text').fadeOut(500);

        });

---

}))

这也可能有效

$("#image-left").stop( true, true );
$("#image-right").stop( true, true );

把你想停的那个放在悬停后。因此，如果向左悬停，请向右停止。

可以使用全局变量 那么就这么做吧

var active = true ;

$("#container-left").hover(function() {
     if(active)
     {
         active = false ;
         // do stuff
     }
}, function(){
     active = true ; 
     // do stuff
}

$("#container-right").hover(function() {
     if(active)
     {
         active = false ;
         // do stuff
     }
}, function(){
     active = true ; 
     // do stuff
}

---

有一个名为hoverintent的插件，它使用鼠标悬停速度来触发指定的行为。你可以使用它。你在寻找谢谢，我添加了stop（），它工作得更好。我添加了。stop（），没有true，true，它工作得更好。真的，真的做什么？clearQueue&jumpToEnd默认为false，因此如果设置为true，则返回true。感谢您的回复。无论出于何种原因，设置为false时似乎效果更好。是的，下次您应该将代码添加到JSFIDLE，并给我们一个链接，以便我们可以实时编辑它，并为您提供更好的结果。-你对结果满意吗？还是你仍在寻求进一步扩展？很好。我只是把它放在这里：现在很好。如果可能的话，我认为如果在第一个动画被触发时禁用第二个动画，然后在完成后重新恢复，效果会更好。知道我的意思吗？我用了.stop（）作为快速修复，但我也要试试这个。我想这是一个更好的方法，它产生的结果和原来的一样，但我很好奇是否有办法让这个方法工作。理想情况下，我希望在第一个动画运行时使另一个动画处于非活动状态，而不是在它已经运行时停止它。