javascript - jQuery Animate 2 动作，相同的对象

Question

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

弹跳：

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

移动：

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

有什么建议吗？

Answer 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;
}

Answer 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/