Question

我有以下动画......

$('.animate_camper').click(function(){
   startCamper();
   setTimeout("leaveScreen()",1000) ;
});

var num = 1;

function startCamper(){
  num++;
  $(".bus").animate({top:"-=6px"},150).animate({top:"+=6px"},150);
  if(num<4){
         setTimeout("startCamper()",300);
  } else {
     setTimeout("bounceCamper()",300);
  }
}

function bounceCamper(){
  $(".bus").animate({top:"-=6px"},150).animate({top:"+=6px"},150);
  setTimeout("bounceCamper()",300);
}

function leaveScreen(){
  $(".camper").animate({left:"140%"}, 3000).fadeTo(400, 0)
}

所以你可以在链接上看到，campervan开始在一个循环上上下跳动，然后向右驱动并淡出。

然而，虽然它逐渐消失，但元素仍然存在（虽然隐藏）上下弹跳。

我需要它淡出，然后停止弹跳并重置回其原始位置，以便在再次点击链接时它可以再次运行。

任何帮助都非常受欢迎!!

Answer 1

~~你想要一个“停止”，jQuery有一个名为.stop()的函数。~~

.stop （[clearQueue] [，jumpToEnd]）

返回：jQuery

~~描述：停止匹配元素上当前正在运行的动画。~~

你的弹跳是由这段代码引起的，它在300ms后调用自己：

function bounceCamper(){ $(".bus").animate({top:"-=6px"},150).animate({top:"+=6px"},150); setTimeout("bounceCamper()",300); }

您需要通过变量引用计时器来中断该计时器并使用clearTimeout：

var timer; function bounceCamper(){ $(".bus").animate({top:"-=6px"},150).animate({top:"+=6px"},150); timer = setTimeout("bounceCamper()",300); } //stop the existing timer to break loop clearTimeout(timer);

或使用布尔标志有条件地中断调用：

var toLoop = true; function bounceCamper(){ $(".bus").animate({top:"-=6px"},150).animate({top:"+=6px"},150); if(toLoop) setTimeout("bounceCamper()",300); } //stop the existing timer by setting the flag to false toLoop = false;

至于重置，您需要在fadeOut之后设置元素的位置。您可以使用.css()。
来实现

完成后停止多个动画功能并重置

1 个答案: