0

我有以下动画...

$('.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)
}

因此，正如您在链接上看到的那样，单击露营车开始在循环中上下弹跳，然后向右行驶并逐渐消失。

然而，尽管它淡出，但元素仍然存在（尽管隐藏）上下弹跳。

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

很感谢任何形式的帮助！！

4

1 回答 1

0

你想要一个“停止”，jQuery 有一个名为.stop().

.stop ( [clearQueue ] [, jumpToEnd ] )

返回：jQuery

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

您的弹跳是由这段在 300 毫秒后调用自身的代码引起的：

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().

于 2013-05-24T10:57:53.587 回答