Сделать анимацию медленнее (jQuery)

#javascript #jquery #html #css #animation

#javascript #jquery #HTML #css #Анимация

Вопрос:

Я пытаюсь сделать анимацию блока, изменив его position .

Например, переместить блок слева в середину с помощью анимации css left .

Проблема в том, что процесс анимации происходит с одинаковой скоростью от начала до конца.

Я хочу сделать анимацию медленнее в конце, она должна замедляться, когда дело доходит до конечной точки.

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

Ответ №1:

Вам нужен эффект облегчения. Вот несколько демонстраций:

http://jquery-ui.googlecode.com/svn/tags/1.6rc6/demos/effects_easings/default.html

Редактировать:

Вот более «официальная» демонстрационная страница:

http://jqueryui.com/demos/effect/easing.html

Ответ №2:

Это отличная ссылка на то, как работают эффекты смягчения: http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html . Да, я знаю, что это для библиотеки actionscript Tweener , но все имена для упрощения одинаковы (по большей части).

Вы ищете easeOut или easeOutQuad или easeOutCubic . (Они расположены в порядке того, как быстро они начнут замедляться)

Ответ №3:

Попробуйте что-нибудь вроде этого:

 $('#yourBlock').animate({
    left: newValue
}, 500, 'easeOut')

Ответ №4:

 $(document).ready(function () {
    $("#imgAnimate").click(function () {
        $("#imgAnimate").animate({ "opacity": 0.0, left: '800px' }, 2500);
    });
});