Question

我正在尝试降雪动画。我希望在以下之后停止它5秒。我当前在animate之间添加了setTimeOut，不知何故没有效果。我在这里缺少什么？

当前代码：

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);

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

这是关于你想要做的事情的另一个例子：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;
}

并在var end = false;

的开头添加firstCall

这是工作的：JSFIDDLE

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

更新：利用@Kyojimaru的回答。

1 个答案:

修改