$(document).ready(function() {
$("#div1").fadeIn("slow");
$("#div2").delay(500).fadeIn("slow");
$("#div3").delay(2000).fadeIn("slow");
$("#div4").delay(8000).fadeIn("slow");
});
这是我当前的设置,但我觉得这不是编写此内容的最佳方式。我找不到任何关于如何更好地编写计时的示例。有什么帮助吗?我会很感激。
我还应该补充一点,每个元素的时间并不一致。
fadeIn
将回调作为其第二个参数。动画完成后立即执行该回调。如果您希望元素按顺序淡入,您可以链接回调:
$(document).ready(function() {
$("#div1").fadeIn("slow", function(){
$("#div2").fadeIn("slow", function(){
$("#div3").fadeIn("slow", function(){
$("#div4").fadeIn("slow");
});
});
});
});
如果您愿意,可以使用选择器数组和单个方法来重写:
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 上查看最后一项的实际效果 http://jsbin.com/epuvu4/edit.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)