Как создать пользовательские jQuery Easing/Bounce Animations? - программирование

Как создать пользовательские jQuery Easing/Bounce Animations?

Я знаком с функцией анимации jQuery, и я также прошел через различные функции jQuery UI easing. К сожалению, ни один из них не выглядит как тот же эффект анимации, который я ищу, так что можно создать свои собственные функции ослабления?

Анимацию, которую я пытаюсь увидеть, можно увидеть на веб-странице Apple Mac с динамически загруженным виджетами продуктов вверху. Первоначальные элементы, как представляется, скользят сверху, а затем дают эффект отскока после посадки на место. Можно ли воссоздать этот стиль ослабления с помощью пользовательского кода jQuery? Или, возможно, создать свои собственные сторонние простые функции?

Я включил экран того, что я говорю, и, надеюсь, кто-то может предложить решение. Спасибо заранее:)

Mac animated menu

highlighted graphics

4b9b3361

ОТВЕТЫ

Ответ 1

Смотрите мою демонстрацию

Основная идея - выполнение 2 непрерывных анимаций с использованием easeOutCubic:

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