一段时间后如何停止动画？

Question

我正在尝试下雪动画。我想在例如之后停止它5秒。我目前在setTimeOut 之间添加animate，不知何故没有效果。我在这里错过了什么？

当前代码：

function fallingSnow() {

   var snowflake;
   snowflake = $('<div class="snowflakes"></div>');

   $('#snowZone').prepend(snowflake);
   snowX = Math.floor(Math.random() * $('#site').width() / 4);
   snowSpd = Math.floor(Math.random() + 50000);

   snowflake.css({
       'left': snowX + 'px'
   });

   setTimeout(function(){
      snowflake.stop().animate({
          top: "700px",
          opacity: "5",
      }, snowSpd, function () {
          $(this).remove();
          fallingSnow();
      })
  },5000);
}

timer = Math.floor(Math.random() + 1000);

window.setInterval(function () {
    fallingSnow();
}, timer);

---

更新：在使用@Kyojimaru 的回答之后。

snowflake.animate({
        top: "700px",
        opacity: "5",
    }, 5000, function () {
        $(this).remove();           

      if(!end) {
        fallingSnow();
        window.setTimeout(function () {
        clearInterval(interval);
        end = true;
        }, 5000);
      }
    }                          
   );

• updated fiddle

Answer 1

这是因为您的setInterval 从未停止调用fallingSnow，请尝试将您的代码更改为这个

var firstCall = false;
var interval, timeout;
function fallingSnow() {

   var snowflake;
   snowflake = $('<div class="snowflakes"></div>');

   $('#snowZone').prepend(snowflake);
   snowX = Math.floor(Math.random() * $('#site').width() / 4);
   snowSpd = Math.floor(Math.random() + 50000);

   snowflake.css({
       'left': snowX + 'px'
   });

   if(!firstCall) {
       timeout = setTimeout(function(){
           clearInterval(interval);
       },5000);
       firstCall = true;
   }
}

timer = Math.floor(Math.random() + 1000);

interval = setInterval(function () {
    fallingSnow();
}, timer);

基本上，您需要的是仅在第一次使用 setTimeout 调用函数时使用 clearInterval 清除已为 function fallingSnow() 设置的间隔

这是关于它的另一个例子：JSFIDDLE

这就是你现在可能发生的事情：JSFIDDLE

编辑

基于您的小提琴here（需要将jQuery 和snowflakes css width and height 添加到0px 之外的任何内容）

你的问题是你在脚本中声明为

var firstTime = false;

但要检查它

if (!firstCall)

所以您需要将var firstTime = false; 更改为var firstCall = false;

另一个问题来自这里的代码

snowflake.animate({
    top: "700px",
    opacity: "5",
}, snowSpd, function () {
    $(this).remove();
    fallingSnow();
});

在动画完成后再次调用fallingSnow();函数，因此雪永远不会停止下落，所以你需要检查setTimeout是否已经清除了间隔，你需要将你的代码更改为这个

snowflake.animate({
    top: "700px",
    opacity: "5",
}, snowSpd, function () {
    $(this).remove();
    if(!end) {
        fallingSnow();
    }
});

if (!firstCall) {
    timeout = setTimeout(function () {
        clearInterval(interval);
        end = true;
    }, 5000);
    firstCall = true;
}

并以firstCall开头添加var end = false;

这是有效的：JSFIDDLE