1

我有许多 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()但是生成的代码将非常庞大且难以阅读 IMO。

4

1 回答 1

3

你可能想看看我对Can有人也向我解释 jQuery.queue 的回答，但这里有一个快速示例，说明如何在空对象上使用队列来创建一个非常简单的队列：

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 );
});
于 2012-07-10T18:56:00.480 回答