jQuery Animate 2 动作，相同的对象答案

【问题标题】：jQuery Animate 2 actions, same objectjQuery Animate 2 动作，相同的对象
【发布时间】：2013-05-11 19:59:15
【问题描述】：

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

弹跳：

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

移动：

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

有什么建议吗？

【问题讨论】：

This question 可能会有所帮助。
弹跳球代码在另一个类似的问题中：stackoverflow.com/questions/2344804/…

标签： javascript jquery jquery-animate bounce

【解决方案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/

【讨论】：