Как изменить скорость анимации с помощью jquery?

#javascript #jquery #css

Вопрос:

У меня есть этот код

 .test2{
transition: 10s;  
}

 window.onscroll = function() {
  $( ".test2" ).animate({
  top: -s-100 }, 0, "linear");  
  }

или

 window.onscroll = function() {
  $('.test2').css('transition',  0);  
  $('.test2').css('transition',  "");  
  }

Но ничего не произошло. Это должно быть, когда я прокручиваю страницу колесом вниз или щелкаю мышью на полосе прокрутки в этот момент transition: 0s; но в тот момент, когда я перестаю это делать. тогда переход сразу становится 10 секунд
Когда вы нажимаете на кнопку, анимация должна быть плавной.

Возможно ли сделать что-то подобное?

Codepen пример

1. Afaik, переход должен знать, что нужно переходить. Все, что вы указали, это длительность, а не свойство переходить при ее изменении. Кроме того, jQuery animate() вообще не использует свойство перехода css. animate() написан для того, чтобы браузеры, которые не обладают врожденной способностью анимации, по-прежнему имели эту функциональность.

Ответ №1:

просто немного кода, не тестировал его, но я надеюсь, что он близок к тому, что вы ищете, используя offset() для получения верхней позиции при прокрутке страницы..

и установите xtop переменную, а затем вызывайте doAnimation() при каждом прокручивании страницы, но не забывайте вызывать stop() метод для каждого объекта, чтобы кэш анимации не загружался и не замедлял работу вашей системы.

 var xtop;

window.onScroll = function(){
    xtop = $(window).offset().top; //get the top position.
    doAnimation();
}

function doAnimation(){
   $(".test2").stop().animate({top: xtop}, 10000, "linear");  
}

всякий раз, когда вы останавливаете прокрутку, объект анимируется в xtop позицию за 10 секунд (10000 миллисекунд), я надеюсь, это сработает.

1. не помогло, я отредактировал код, но я не знаю, как удалить $ («.test2»).animate({transition: «0s»}, 1); } Поэтому мне пришлось сделать костыль, Вы не знаете, как это исправить? codepen.io/zeni-agentt/pen/aMBvKO