重复jquery动画

时间:2011-05-19 18:27:44

标签: jquery animation repeat

如何在延迟5秒后重复播放此动画序列?

function homeanimation(){  

$('#identity-text-01').fadeIn(1000).delay(2000).fadeOut(1000);  
$('#identity-image-01').delay(2000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#print-text-01').delay(6000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#print-image-01').delay(7000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#web-text-01').delay(12000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#web-image-01').delay(13000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#wayfinding-text-01').delay(18000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#wayfinding-image-01').delay(19000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#exhibit-text-01').delay(24000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#exhibit-image-01').delay(25000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#recognition-text-01').delay(30000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#recognition-image-01').delay(31000).fadeIn(1000).delay(2000).fadeOut(1000);

$('#packaging-text-01').delay(36000).fadeIn(1000).delay(2000).fadeOut(1000);
$('#packaging-image-01').delay(37000).fadeIn(1000).delay(2000);
};
homeanimation();

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

更改最后一行:

$('#packaging-image-01').delay(37000).fadeIn(1000).delay(2000);

为:

$('#packaging-image-01').delay(37000).fadeIn(1000).delay(2000);
setTimeout('homeanimation()', 5000);

答案 1 :(得分:1)

您可以通过设置超时延迟执行javascript中的任何代码:

function MyAlert(msg) {
   alert(msg);
}

//By using a function object as the first parameter
//any variables you need to use/pass will still be in scope
var msg = "Hey there!";
var delay = 5000; //the delay in milliseconds to wait (in this case 5 seconds)
setTimeout(function() { MyAlert(msg); }, delay);