影响不同元素链接jQuery的动画 [英] Chaining jQuery animations that affect different elements
问题描述
$(document).ready(function() {
$("#div1").fadeIn("slow");
$("#div2").delay(500).fadeIn("slow");
$("#div3").delay(2000).fadeIn("slow");
$("#div4").delay(8000).fadeIn("slow");
});
这是我目前的设置,但我觉得这是不是写这个的最佳方式。我找不到你会怎么写时序这更好的例子。任何帮助吗?我想AP preciate它。
This is my current setup but I feel like this isn't the best way to write this. I can't find any examples on how you would write this better for timing. Any help? I'd appreciate it.
我还应当补充一点,每个元件的定时不一致。
I should also add that the timing of each element isn't consistent.
推荐答案
淡入
需要一个回调函数作为其第二个参数。这种回调一旦动画完成执行。如果你想要的元素在相继消失,你可以链中的回调:
fadeIn
takes a callback as its second parameter. That callback is executed as soon as the animation is complete. If you want the elements to fade in sequentially, you could chain the callbacks:
$(document).ready(function() {
$("#div1").fadeIn("slow", function(){
$("#div2").fadeIn("slow", function(){
$("#div3").fadeIn("slow", function(){
$("#div4").fadeIn("slow");
});
});
});
});
这可以使用选择器的阵列和一个单一的方法重新编写的,如果你觉得喜欢它:
This could be re-written using an array of selectors and a single method, if you felt like it:
var chain = function(toAnimate, ix){
if(toAnimate[ix]){
$(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1 )});
}
};
$(document).ready(function(){
chain(['#div1', '#div2', '#div3', '#div4'], 0);
});
参见JSBin 这最后一个行动。
这篇关于影响不同元素链接jQuery的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!