清除间隔以停止效果

时间:2018-04-15 20:04:44

标签: javascript jquery

我在几张背景图片上使用jQuery ripple effect来获取水下文字的外观。

为了得到我想要的东西,我需要至少启用一些'干扰'。扰动是涟漪中复合/折射的量。最初看起来很棒,但它会持续复合,直到涟漪超出我想要的范围。

我称之为涟漪如下:

$(".wavy").ripples({
    interactive:false,
    perturbance:0.01
});

然后像这样自动添加它们:

setInterval(function() {
var $el = $(".wavy");
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.02 + Math.random() * 0.02;
$el.ripples('drop', x, y, dropRadius, strength);
}, 1000);

我需要在几秒钟后停止效果,所以我试图清除间隔或在一定时间后停止它。

顺便说一句,我首先尝试仅在标题在视口中时运行效果,但效果的'pause'和'destroy'方法都是不可接受的。暂停在效果中间停止,并且破坏使背景图像(标题)消失。

为了清除间隔,我尝试了这个:

var wavyLength = setInterval(function() { myWavy () }, 400);

function myWavy() {
var $el = $(".wavy");
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.02 + Math.random() * 0.02;
$el.ripples('drop', x, y, dropRadius, strength);
}

clearInterval(wavyLength,10000);

但这使得涟漪效应根本不会发生。

尝试用JS改善。感谢任何建议!

1 个答案:

答案 0 :(得分:1)

使用setTimeout等待10000ms,然后致电clearInterval

setTimeout(function(){
    clearInterval(wavyLength)
}, 10000)