使用Jquery制作带有简单动画的循环。

Question

我正在尝试制作一个替代Flash动画的东西。

这个动画非常简单，背景图片向左滑动10秒钟。同时显示一个产品和它的名称。

我已经使用jQuery重新创建了这个动画... 它完美地工作了，但只能播放一次！T_T

有人知道如何使它循环播放吗？

以下是代码：

function first() {
    $(".img1").animate({left: "-214"}, 10000);
    $(".img2").hide();
    // i hide everything        
};

function second() { 
    $(".img2").fadeIn("slow");
    $(".img1").fadeOut("slow");
    $(".img2").animate({left: "-214"}, 10000);
    // other div animations.. fades in.. slides.. etc.
};

时间函数是：

$(function() {  
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);        
});

我尝试清除setTimeout，但显然没有成功。如果你们有任何线索，我怎样才能用这些函数（first，second，third等）制作一个无限循环呢？谢谢！请留意我的问题。

- Andy

Answer 1

试试这个：

...
function doAnimation() {
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);  
}

$(document).ready() {
    setInterval("doAnimation()", 5000);
});

请查看 Javascript 定时事件。

- karim79

Answer 2

将您的动画代码封装在一个函数中，并在结尾处设置一个定时器。类似于以下内容：

function doAnimation() {
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);
    setTimeout("doAnimation()", 50000);
}

- Ross Snyder

---

我尝试了你说的...效果不是很好...我会继续研究你的想法。 - Andy

Answer 3

使用回调参数让每个函数触发下一个函数！

- Randal Schwartz

---

那样做不会使动画循环！我知道你的意思，这样做可能更好，但它并不能解决主要问题... 循环。 - Andy