Question

我对Jquery中的动画有疑问。我有3张相同的图片。它们彼此定位。当我滚动时，第一个保持不变，而其他两个则通过translate3D移动了几个像素。第二个从20px移动，最后一个从40px移动。当我停止滚动时，图像将返回其初始位置。

我的代码适用于mozilla firefox，但不适用于chrome。我注意到，与在chrome上相比，当我重新加载页面时，滚动时动画会起作用。但是当我停止滚动而不是重新开始滚动时，动画不再起作用。而且，如果我等到页面上等了几秒钟，动画就根本无法正常工作。

我已经尝试在转换中添加前缀-webkit-，但是没有效果。

一个主意？

这是代码：

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;
});

提前谢谢！

带有translate3D的jQuery动画仅在Firefox上有效

0 个答案: