jQuery Animate 2 动作，相同的对象

Posted 2023-05-08

【中文标题】jQuery Animate 2 动作，相同的对象

【英文标题】：jQuery Animate 2 actions, same object

【发布时间】：2013-05-11 19:59:15

【问题描述】：

我正在尝试为一个弹跳并向前移动的球设置动画。 首先，球必须在同一个地方弹跳 X 次，然后它必须向前弹跳。

弹跳：

$("#ball").animate(top:"-=5px",150).animate(top:"+=5px",150);

移动：

$("#ball").animate("left":"850px",2800);

有什么建议吗？

【问题讨论】：

This question 可能会有所帮助。

弹跳球代码在另一个类似的问题中：***.com/questions/2344804/…

【参考方案1】：

这里有一个你想要的小提琴，你可以很容易地调整它：http://jsfiddle.net/2LyWM/

$(document).ready(function()

    $("#ball").queue( function() 

        $(this).animate(top:'+=50px',  duration: 500, queue: true );
        $(this).animate(top:'0px',  duration: 500, queue: true );
        $(this).animate(top:'+=50px',  duration: 500, queue: true );
        $(this).animate(top:'0px',  duration: 500, queue: true );
        $(this).animate(top:'+=50px',  duration: 500, queue: true );
        $(this).animate(top:'0px',  duration: 500, queue: true );
        $(this).animate(top:'+=50px',  duration: 500, queue: true );        
        $(this).animate( left:'+=100px',  duration: 2500, queue: false );

        $.dequeue( this );
    );

);

html

<div id="ball">ball</div>

css

#ball
    top: 0px;
    left: 0px;
    position: relative;

【讨论】：

如果你想知道，“queue: true”告诉jquery“排队这个动画”（即等到其他动画完成后再开始）。最后一个动画行 (queue: false) 告诉 jquery 立即运行动画，这会给你想要的效果。此外，您可以将所有 queue=true 动画的持续时间 (3,500) 相加，这将是动画运行的总时间。我将左侧动画设置为 2,500（提前 1000 毫秒）。

【参考方案2】：

这是一种方法。为了让球反弹 X 次，我们可以创建一个利用 jQuery 动画队列的递归函数：

function bounce(n) 
    if (n > 0) 
        $("#ball").animate(top: "-=5px", 150)
            .animate(top: "+=5px", 150, function() 
                bounce(n-1); 
            );
    
;
bounce(3);

为了让它在之后滚动并继续弹跳，我们需要使用.dequeue() 来同时运行两个动画：

$("#ball").animate("left": "850px", 2800).dequeue();
bounce(10);

现在，将它们组合起来，创建一个仅在第 X 次反弹后运行的特殊回调函数：

function bounce(n, callback) 
    if (n > 0) 
        $("#ball").animate(top: "-=5px", 150)
            .animate(top: "+=5px", 150, function () 
                bounce(n-1, callback);
            );
     else if (callback)  // might be undefined
        callback();
    
;

bounce(3, function() 
    $("#ball").animate("left": "850px", 2800).dequeue();
    bounce(10);
);

http://jsfiddle.net/mblase75/c72Qj/