jQuery的动画不同步
问题描述:
的很快我的动画开始后,它会不同步。 的div应该淡入和一前一后淡出。jQuery的动画不同步
请大家看看下面我的代码...
感谢
(document).ready(function(){
animate_loop = function animate_loop(){
$("#w01").animate({ opacity: 0.4, }, 1000,
function(){ $("#w01").animate({ opacity: 1}, 600)
animate_loop();
});
}
animate_loop();
animate_loop = function animate_loop(){
$("#w02").animate({ opacity: 0.4, }, 1500,
function(){ $("#w02").animate({ opacity: 1}, 600)
animate_loop();
});
}
animate_loop();
animate_loop = function animate_loop(){
$("#w03").animate({ opacity: 0.4, }, 2000,
function(){ $("#w03").animate({ opacity: 1}, 600)
animate_loop();
});
}
animate_loop();
animate_loop = function animate_loop(){
$("#w04").animate({ opacity: 0.4, }, 2500,
function(){ $("#w04").animate({ opacity: 1}, 600)
animate_loop();
});
}
animate_loop();
});
答
如果你想要更多的控制使用下面的代码。我强烈建议使用添加一个类,然后通过CSS动画而不是制作一个jQuery循环。
这里有一个新的演示:http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});
答
如果你想只是做一个淡入淡出效果,可以使用CSS和在不同的时间在使用setInterval添加类。使用.each(index, el)
来通过每个元素。索引将是1,2,3,4等...所以用它来延迟你的动画。
这里有一个演示:http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});
+0
如何用ID的适应这一点,并专门针对每一个元素,所以我可以有更好的控制? – Borsn 2015-02-08 01:38:19
@miro你是什么意思? – Borsn 2015-02-08 01:19:15
您正在为不同的div使用相同的功能。它在第二个启动后立即调用相同的功能。为什么eveything包装在文档中准备好了? – Miro 2015-02-08 01:19:33
你的HTML是什么样的? – Miro 2015-02-08 01:20:27