Ослабление анимации прокрутки с помощью jQuery

#jquery #scroll #jquery-animate #effect #easing

#jquery #прокрутка #jquery-анимировать #эффект #ослабление

Вопрос:

Я пытаюсь создать эффект упрощения для моей функции animate в jQuery, но у меня возникли некоторые проблемы. Вот что у меня есть до сих пор:

 function myCustomFunction(id){
    var divTag = $("div[name='"  id  "']");
    $('html,body').animate({scrollTop: divTag.offset().top}, 800);
}

Простота, которую я хочу использовать, называется «easeOutQuint». Я попытался последовать приведенному здесь примеру (http://easings.net/#easeOutQuint ) но не смог применить этот пример к моей функции.

1. Что вы имеете в виду, когда говорите, что не смогли применить пример? Какую ошибку вы получаете?

2. Я попытался добавить его так, как @user2039846, упомянутый ниже, но по какой-то причине он полностью удалил функцию прокрутки.

Ответ №1:

Во-первых, включите первый скрипт из раздела загрузка на этой странице: (http://gsgd.co.uk/sandbox/jquery/easing /).

Затем введите анимированную строку jQuery, как показано ниже:

 function myCustomFunction(id){
var divTag = $("div[name='"  id  "']");
$('html,body').animate({scrollTop: divTag.offset().top}, 800, 'easeOutQuint');
}

Здесь вы можете увидеть пример…
http://jsfiddle.net/Gq367 /

Как вы можете видеть, вы пропустили параметр смягчения в функции jquery animate. Быстрое напоминание: .animate( свойства [, продолжительность ] [, ослабление ] [, завершение ] )

Мне интересно, почему вы выбираете div по имени атрибута?

1. Спасибо! Это идеально. Я думал, что ослабление было встроено непосредственно в jQuery. Как только я загрузил этот файл смягчения, все начало работать. Кроме того, причина, по которой я использую «div [name ='» id «‘]», заключается в том, что я запускаю скрипт после завершения видео vimeo. Итак, весь код выглядит следующим образом: функция scrollToAnchor(id){ var divTag = $(«div[name='» id «‘]»); $(‘ html,body’).анимировать({scrollTop: divTag.offset().top}, 2000,’easeOutQuint’); } функция onFinish(id) { scrollToAnchor(‘story’); }

2. Если я установлю 4000 для относительно небольшой высоты, это выглядит очень хорошо, но, поскольку для получения такого приятного эффекта требуется много времени, форма зависает для прокрутки, потому что ослабление еще не закончено, но контроль достигнут. Мне интересно, есть ли решение для этого. Основываясь на многих тестах, до 2000 года ослабление едва заметно.

3. Вы всегда можете прослушать событие прокрутки и остановить анимацию, если кто-то начал прокрутку