Как добавить "облегчение" в анимацию/прокрутку

Я использую следующую функцию для создания анимации прокрутки для привязки ссылок:

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500 );
    return false;
});

Я хотел бы добавить смягчение. Однако, когда я добавляю "ослабление" после "500", он разбивает script:

$('a').click(function(){
    $('html, body').animate(
        {scrollTop: $( $.attr(this, 'href') ).offset().top}, 
        500, easing );
    return false;
});

Любые идеи, что я делаю неправильно?

Ответы

Ответ 1

Сначала вам нужно включить jQuery.UI script, тогда ваш код должен выглядеть:

$('a').click(function(){
    var top = $('body').find($(this).attr('href')).offset().top;
    $('html, body').animate({
        scrollTop: top
    },500, 'easeOutExpo');

    return false;
});

Для информации:

Облегчение

Оставшийся параметр .animate() - это строка, обозначающая ослабление функции для использования. Функция ослабления определяет скорость, с которой анимация прогрессирует в разных точках анимации. только ослабление реализаций в библиотеке jQuery по умолчанию, называемый свинг, и тот, который прогрессирует в постоянном темпе, называется линейно. Доступны более легкие функции с использованием плагинов, в первую очередь jQuery UI.

Почему ваш код не работает:

  • Потому что вы используете this, который был в рамках метода анимации и ссылку на объекты body и html.
  • Потому что easing не метод. Является строковым типом свойства анимации, поэтому вам нужно напишите его как строку, например: 'easeOutExpo' или "easeOutExpo".