Jquery анимация с translate3D работает только на Firefox - PullRequest
Новая
       31

Jquery анимация с translate3D работает только на Firefox

0 голосов
/ 01 октября 2018

У меня проблема с анимацией в Jquery.У меня 3 одинаковых изображения.Они расположены один на другом.Когда я прокручиваю, первый остается фиксированным, а два других перемещаются с помощью translate3D на несколько пикселей.Второй ход от 20px и последний от 40px.Когда я прекращаю прокручивать изображения возвращаются в исходное положение.

Мой код работает на Mozilla Firefox, но не работает на Chrome.Я заметил, что чем на Chrome, анимация работает, когда я прокручиваю, как только я перезагружаю страницу.Но когда я прекращаю прокручивать и затем перезагружаюсь, чтобы прокрутить, анимация больше не работает.И если я подожду несколько секунд, когда попаду на страницу, анимация вообще не работает.

Я уже пытаюсь добавить префикс -webkit- в преобразование, но без эффектов.

Anидея?

Это код: 

var lastScrollTop = 0;
$(window).scroll(function(event){

  var st = $(this).scrollTop();

  if (st > lastScrollTop){
    $('.number_2').css("transform", "translate3D(0px, -20px, 0px)");
    $('.number_3').css("transform", "translate3D(0px, -40px, 0px)");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('.number_2').css("transform", "translate3D(0px, 0px, 0px)");
      $('.number_3').css("transform", "translate3D(0px, 0px, 0px)");
    }));
  } else {
    $('.number_2').css("transform", "translate3D(0px, 20px, 0px)");
    $('.number_3').css("transform", "translate3D(0px, 40px, 0px)");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('.number_2').css("transform", "translate3D(0px, 0px, 0px)");
      $('.number_3').css("transform", "translate3D(0px, 0px, 0px)");
    }));
  }

  lastScrollTop = st;
});

Заранее спасибо!

...