Wie erstellt man benutzerdefinierte jQuery Easing/Bounce-Animationen?

Question

Ich bin vertraut mit der jQuery Animate-Funktion und ich habe auch die verschiedenen jQuery UI easing functions durchlaufen. Leider erscheint keiner von ihnen als derselbe Animationseffekt, den ich suche. Ist es also möglich, eigene Easing-Funktionen zu erstellen?

Die Animation, die ich versuche, kann auf der Apple Mac webopage mit dem dynamisch geladenen Produkte Widget an der Spitze gesehen werden. Die anfänglichen Gegenstände scheinen von oben nach innen zu gleiten und geben dann nach der Landung einen Rückpralleffekt. Ist es möglich, diesen Beschleunigungsstil mit benutzerdefiniertem jQuery-Code neu zu erstellen? Oder vielleicht bauen Sie Ihre eigenen 3rd-Party-Easy-Funktionen?

Ich habe einen Bildschirm von dem, worüber ich spreche, eingefügt und hoffentlich kann jemand eine Lösung anbieten. Vielen Dank im Voraus :)

Answer 1

Meine demo here

Die Hauptidee ist die Durchführung 2 kontinuierliche Animationen mit easeOutCubic Effekt:

HTML:

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

JS:

$('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"); 
});