कस्टम jQuery आसान/बाउंस एनिमेशन कैसे बनाएं?

Question

मैं चेतन समारोह jQuery से परिचित हूँ और मैं भी विभिन्न jQuery UI easing functions के माध्यम से चले गए हैं। दुर्भाग्यवश उनमें से कोई भी एक ही एनीमेशन प्रभाव के रूप में दिखाई नहीं दे रहा है, इसलिए मैं अपने स्वयं के आसान कार्यों को बनाना संभव है?

एनीमेशन मैं प्रयास कर रहा हूँ गतिशील लोड उत्पादों के साथ Apple Mac webopage पर देखा जा सकता शीर्ष पर विजेट। प्रारंभिक आइटम शीर्ष से स्लाइड करने के लिए दिखाई देते हैं और फिर जगह पर लैंडिंग के बाद बाउंस-बैक प्रभाव देते हैं। कस्टम jQuery कोड का उपयोग कर इस आसान शैली को पुनर्निर्माण करना संभव है? या संभवतः अपने स्वयं के तीसरे पक्ष के आसान कार्यों का निर्माण?

मैं मैं क्या बारे में बात कर रहा हूँ का एक स्क्रीन को शामिल किया है और उम्मीद है कि किसी को एक समाधान की पेशकश कर सकते हैं। अग्रिम :)

Answer 1

धन्यवाद देखें मेरी demo here

मुख्य विचार 2 निरंतर easeOutCubic प्रभाव का उपयोग एनिमेशन प्रदर्शन कर रहा है:

HTML:

<div class='left'></div> 
<div class='center'></div> 
<div class='right'></div> 

जे एस:

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){ 
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic"); 
}); 

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){ 
    $('div.center').animate({top: 400}, 300, "easeOutCubic"); 
}); 

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){ 
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic"); 
});