Как я могу добавить ускорение к этой анимации jQuery? - PullRequest
Новая
       23

Как я могу добавить ускорение к этой анимации jQuery?

1 голос
/ 19 августа 2011

Я смог анимировать свои <div> ( больше информации ) от bottom:-100px до bottom:0px.

Теперь я хотел бы иметь разные скорости: немного начатьмедленнее в начале анимации и затем быстрее в конце анимации.

Вот как это выглядит: 

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, function() {
                    $('#bannerFijo').animate({ bottom: '0px' }, 100);
});

Но я уверен, что должен быть другой способ, так чточто скорость меняется постепенно.

-edit-

Анимированная версия два: 

$('#bannerFijo').animate({ bottom: '0px' }, 1200, function() {
                    $('#bannerFijo').animate({ bottom: '-15px' }, 300,function() {
                        $('#bannerFijo').animate({ bottom: '-5px' }, 150,function() {
                            $('#bannerFijo').animate({ bottom: '-10px' }, 100,function() {
                                $('#bannerFijo').animate({ bottom: '0px' }, 50);
                                    return true;
                                });
                            });
                    });
        });

-Edit- Благодаря SuperPaperSam я получил это решение («нет» плагинов) 

$.easing.easeOutBounce = function (x, t, b, c, d) {
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }

    }

Итак, функция анимации выглядит так: 

function mostrar_banner(){

        $('#bannerFijo').animate({ bottom: '+=110px' }, 2000, 'easeOutBounce'); 
}

Ответы [ 3 ]

2 голосов
/ 19 августа 2011

Вы можете использовать любую функцию «замедления» анимации в jQuery без плагина.Это подробно обсуждается в этом вопросе, который я опубликовал несколько месяцев назад ...

Поиск функций JQuery замедления без использования плагина

В приведенной выше теме содержится JQuery замедлениефункции в принятом ответе , а также ссылка на другие сторонние функции замедления (2-я и 3-я ссылки на этой странице будут загружать функции).

Looking здесь: , похоже, что easeInCirc соответствует вашему описанию.

Вручную добавьте определенные функции замедления к вашим <script> ... 

$.easing.easeInCirc = function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}

Тогда вы просто вызовете его из существующих функций jQuery animate(), поместив его сразу после параметра duration. 

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, 'easeInCirc', function() {
                $('#bannerFijo').animate({ bottom: '0px' }, 100, 'easeInCirc');
});

Вот JSFiddle с animate() функция замедлена для иллюстрации.

2 голосов
/ 19 августа 2011

Jquery позволяет для замедления, посмотрите плагин замедления .

Это будет выглядеть (не проверено) 

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, nameofeasing, function() {
                $('#bannerFijo').animate({ bottom: '0px' }, 100, nameofeasing);
});

Редактировать: я создал тестстраница этого не использует плагин easing http://jsfiddle.net/EbJBn/2/

1 голос
/ 19 августа 2011

Вы имеете в виду easing?

Другая идея: почему бы не добавить код замедления в ваш файл JavaScript?Вот мой взгляд на это в JsFiddle Вы можете выбрать желаемое смягчение и отключить другие, если размер плагина вас беспокоит.Надеюсь, это поможет.

...