Question

我们说我有这个

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
             $(".a").css("background-color","black");
        }}
);

$(".b").mouseover(function(){
        $(".a").stop();
});

当.b为mouseover时，.a将stop()，因此其complete:event将不会被触发....

即使停止complete:event会触发我该怎么办？

有没有比这更好的解决方案？

function aaa(){
   $(".a").css("background-color","black");
 }    

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
            aaa();
        }}
);

$(".b").mouseover(function(){
        $(".a").stop();
        aaa();
});

[UPDATES] 这就是我的代码实际上的样子，抱歉没有早点显示...

$(".a").animate(
        {"left":"100%"},
        {duration:50000, complete:function(){
             alert("A");
        }}
);

$(".b").mouseover(function(){
        $(".a").stop().animate(
             {"top":"100%"}
        )
});

我希望alert("A")只执行一次..但我不会阻止来自mouseover的用户.b停止.a ..

如果我以这种方式写.b鼠标：

$(".b").mouseover(function(){
        $(".a").stop().animate(
             {"top":"100%"}
             {complete:function(){
                  alert("A");
             }}            
        )
});

它可能alert("A")两次而且我不想要......

Answer 1

您正在寻找jQuery.stop()的'jumpToEnd'参数：

这样可以解决问题：

$(".a").stop(true,true);

DEMO:

Answer 2

为什么需要触发它，你不能在complete:event调用后立即调用绑定到.stop()的相同函数并获得相同的效果吗？

jQuery：animate complete（）事件在stop（）上执行

2 个答案: