Question

我正在对网页的背景图像使用波纹效果。就目前而言，该效果出现在页面加载中，并随着用户移动鼠标光标而在背景中产生波纹。我正在尝试找出在设定的时间（20秒）后停止效果的方法。

我尝试利用setInterval()和clearInterval()，以及将它们组合/嵌套到setTimeout()中。我复习了一个类似的问题，但是尝试各种解决方案均无效。

我最近的尝试是：

var animateBackground = setInterval(function() {
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });
   }, 1000);
  setTimeout(function(){
    clearInterval(animateBackground);
  }, 20000);

我是Web设计/编码的新手，非常感谢社区可以提供的任何帮助。

Answer 1

您具有停止setInterval的正确语法。

但是看起来您正在使用的ripples插件不需要设置时间间隔；它会连续运行，直到您调用$(selector).ripples('pause')或$(selector).ripples('destroy')。

https://github.com/sirxemic/jquery.ripples

所以您只需要

$('body').ripples({
   resolution: 1297,
   dropRadius: 10,
   perturbance: 0.04,
});
setTimeout(function(){
  $('body').ripples('pause') // or 'destroy', or 'hide'
}, 20000);

Answer 2

此问题已成功回答，如果重新考虑此问题，我将提供以下更新以供将来澄清：

如果其他人最后遇到这个问题，我注意到 $('body').ripples('hide') 效果也很好，并且不会冻结仍然存在任何涟漪的播放状态，而是清除屏幕上的效果并将背景恢复为静态图像。

这是工作脚本的最终版本。

<script>
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });

  setTimeout(function(){
    $('body').ripples('hide');
  }, 20000);
 </script>

有没有一种方法可以在我的html页面上执行JavaScript / JQuery函数一段指定的时间，然后停止执行？

2 个答案: