0

假设我有这两个功能：

$(".a").animate(
        {"left":"100%"},
        {duration:10000, complete:function(){
             //Something is triggered!! e.g 
             alert("a");
            //Please note: In actual case it is never as simple as alert("a").
        }}
);

$(".b").mouseover(function(){
    $(".a").stop().animate({"top":"100px"},{duration:5000});
});

  • 根据这些，.a只要.b是 mouseover-ed 就会停止并且animate({"top":"100px"},{duration:5000})会被触发。

  • 但我希望它在is -ed 然后触发alert("a") 一次。.bmouseoveranimate({"top":"100px"},{duration:5000})

但是，我不能这样设置第二个函数：

$(".b").mouseover(function(){
        //something happens! e.g
        alert("a");
        $(".a").stop().animate({"top":"100px"},{duration:5000});
    });
  • 如果is -ed 在done 之后，它会alert("a") 两次。.bmouseover.aanimate

我试过了stop()，jumpToEnd parameter但并不理想

无论何时.b-ed mouseover，.a'sanimte都会立即完成并.a转移到left:100%. 我希望它stop在它所在的位置，但alert("a")在第二次animate被触发之前

如果有人可以为此提供快速简便的解决方案，我将不胜感激！

4

2 回答 2

1

您可以通过过滤元素来检查元素当前是否正在制作动画:animated。

$('.b').mouseover(function () {

    // if NOT animating, then terminate
    if (!$('.a').is(':animated')) { return; }

    // carry on

});
于 2012-05-22T08:53:40.903 回答
1 
$(".a").animate(
        {"left":"100%"},
        {duration:10000, complete:myAfterWork} // Use the function name only
);

$(".b").mouseover(function(){
    myAfterWork();
    $(".a").stop().animate({"top":"100px"},{duration:5000});
});

function myAfterWork()
{
  if($(".a").is(":animated"))
  {
    //Access $(".a") here and do your job

    //Note if you use $(this) in place of $(".a") it will be different 
    //when called from .a's animation than from .b's animation
  }

}
于 2012-05-22T08:55:29.793 回答