我将许多 jQuery 动画效果应用于页面上的某些元素。现在我的代码如下所示:
jQuery("#bgd_balance").animate({backgroundPositionY: "0px",},800,"swing");
jQuery(".balance_left_box").delay(2000).slideDown(200,"easeInCirc");
jQuery(".balance_left_box p.first-line").delay(2400).slideDown(600,"easeInCirc");
jQuery(".balance_left_box").delay(1000).animate({height:"270px",top:"64px",100,"easeInCirc");
我面临的问题是,当我调整某个元素的延迟时,我必须仔细检查所有内容并相应地调整所有其他延迟。
是否可以使用类似的东西(伪代码):
queue.add(
delay(2000),
jQuery(".balance_left_box").slideDown(200,"easeInCirc"),
delay(2000),
jQuery(".balance_left_box p.first-line").slideDown(600,"easeInCirc");
delay(1000),
jQuery(".balance_left_box").animate({height:"270px", top:"64px"},100,"easeInCirc");
).run();
我希望代码能说明一切。
我知道我可以通过向 animate()
调用添加回调函数来实现这种“排队”,但在我看来,生成的代码将非常庞大且难以阅读。
最佳答案
您可能想看看我在 Can somebody explain jQuery.queue to me 上的回答同样,但这里有一个快速示例,说明如何在空对象上使用队列来创建一个非常简单的队列:
var tempQueue = jQuery({});
tempQueue.delay( 2000 );
tempQueue.queue( function( next ) {
// note using the callback on the animation to call the "next" function in the queue
jQuery( ".balance_left_box" ).slideDown( 200, "easeInCirc", next );
});
tempQueue.delay( 2000 );
tempQueue.queue( function( next ) {
jQuery( ".balance_left_box p.first-line" ).slideDown( 600, "easeInCirc", next );
});
tempQueue.delay( 1000 );
tempQueue.queue( function( next ) {
jQuery( ".balance_left_box" ).animate({
height: "270px",
top: "64px"
}, 100, "easeInCirc", next );
});
关于jquery - 如何在 jQuery 中对函数调用进行分组以便连续执行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11419914/