Jak budować niestandardowe animacje łagodzenia/odskoku jQuery?

Question

Jestem zaznajomiony z funkcją animacji jQuery i przeszedłem także różne jQuery UI easing functions. Niestety, żaden z nich nie ma takiego samego efektu animacji, którego szukam, więc czy możliwe jest stworzenie własnych funkcji rozluźniających?

Animację, którą próbuję, można zobaczyć na stronie Apple Mac webopage z dynamicznie ładowanym widgetem produktów u góry. Początkowe elementy wydają się wsuwać od góry, a po lądowaniu dają efekt odskoku. Czy można odtworzyć ten styl łagodzenia za pomocą niestandardowego kodu jQuery? A może zbudować własne łatwe funkcje?

Załączam ekran z tym, o czym mówię i mam nadzieję, że ktoś może zaoferować rozwiązanie. Z góry dzięki :)

Answer 1

zobaczyć moje demo here

Ideą wykonuje 2 kolejne animacje za pomocą easeOutCubic efekt:

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