Question

我创建了这个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);

        });

}）;

Answer 1

这可能会起作用。

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

在悬停后立即放置要停止的那个。因此，如果向左徘徊，请立即停止。

Answer 2

可以使用全局变量并且那样做

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
}

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

2 个答案: