链接影响不同元素的jQuery动画
链接影响不同元素的jQuery动画
提问于 2010-11-17 03:23:16
$(document).ready(function() {
$("#div1").fadeIn("slow");
$("#div2").delay(500).fadeIn("slow");
$("#div3").delay(2000).fadeIn("slow");
$("#div4").delay(8000).fadeIn("slow");
});这是我目前的设置，但我觉得这不是写这篇文章的最佳方式。我找不到任何例子来说明你如何写出更好的时间安排。有什么帮助吗？我会很感激的。
我还应该补充说，每个元素的时间都不一致。
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-11-17 03:27:32
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);
});Stack Overflow用户
发布于 2013-09-24 18:46:58
从1.8开始，可以很优雅地做到这一点：
$("div").toArray().map(function(e){
return function(){
return $(e).fadeIn(600).promise()
};
}).reduce(function( cur, next ){
return cur.then(next);
}, $().promise());Stack Overflow用户
发布于 2013-01-17 08:15:05
对提供的答案不满意，以下是我使用的答案：
var $steps = $('#div1, #div2, #div3');
// iterate throught all of them
$.each($steps,function(index,value){
$stage.fadeIn('slow', function(){
// You can even do something after the an animation step is completed placing your code here.
// run the function again using a little introspection provided by javascript
arguments.callee
});
})这样你就不必声明延迟了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4198091
复制相关文章
相似问题