Question

我正试图为一个反弹并向前移动的球制作动画。首先球必须在同一个地方反弹X次，但之后它必须向前弹跳。

BOUNCE：

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

MOVING：

$("#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/

jQuery Animate 2个动作，同一个对象

2 个答案: