Question

我在几张背景图片上使用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改善。感谢任何建议！

Answer 1

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

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

清除间隔以停止效果

1 个答案: