jQuery的動畫2分的動作，相同的對象

Question

我試圖動態顯示反彈並向前一球。 首先，球必須反彈X倍，在同一個地方，但隨後必須往前走反彈。

BOUNCE：

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

MOVING：

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

什麼建議嗎？

Answer 1

這裏有一個方法。讓球反彈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); 

現在，把它們結合在一起，創建一個特殊的回調函數，僅第十屆反彈後運行：

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/

Answer 2

這裏有一個小提琴，你想要什麼，你可以很容易地調整它：
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; 
}