我目前有这一点JavaScript使用jQuery动画来创建一个水的运动效果。
var waves = function() {
(function() {
var FirstWave = function() {
this.css = function(p) {
var s = Math.sin(p*5)
var x = (960 * 2) - (p * 960) + 10
var y = s * 5 + 15
return {backgroundPosition: "-" + x + "px", bottom: "-" + y + "px"}
}
};
var tidalWave = function() {
$("#waves-1").animate({path: new FirstWave}, 10999, "linear");
};
setInterval(tidalWave, 500);
})();
};
waves()
在$(document).ready()
处理程序中被调用。
正如你所看到的,setInterval
被设置为500,即使动画持续不到11秒。我这样做是为了确保动画在页面加载时开始,因为仅仅调用$.animate()
并没有启动动画。
我敢肯定这样做会有很多速度问题和其他问题。
可以改进吗?
你应该使用setTimeout而不是setInterval(有很多优点,见这里:setTimeout或setInterval?),因为你想让它重复,你应该在你的tidalWave函数中再做一个setTimeout,再次调用tidalWave本身。
var tidalWave = function() {
$("#waves-1").animate({path: new FirstWave}, 10999, "linear");
setTimeout(tidalWave, 500);
};
setTimeout(tidalWave, 500);
现在你也可以使用$(document)。就绪,而不是初始超时