jquery - CSS转换jquery动画无法正常工作

在回答另一个问题时，我做了一些简单的代码来动画化PNG在您向下滚动页面时的旋转。效果很好，但是在反转向上滚动动画时无法正常工作。

可以预期的是，PNG将返回到其原始位置，但不足几个像素。

小提琴：http://jsfiddle.net/EnSkJ/3/

代码：

var sdegree = 0;


var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       sdegree += 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   } else {
      sdegree -= 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   }
   lastScrollTop = st;
});

最佳答案

您正在增加滚动元素的旋转，但没有考虑用户滚动的距离。

您应该重新编写代码，以便不要总是从旋转中增加或减去一个角度，而是根据用户滚动的距离来计算旋转量。这样，您可以设置起点和终点，在这些起点和终点，元素将始终在这些点处保持相同的旋转度。

更新资料

我在说的一个简单示例在这里：

$(window).scroll(function(event){
   var srotate = "rotate(" + $(this).scrollTop() + "deg)";
   $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});

这是一个演示：http://jsfiddle.net/EnSkJ/4/

由于此代码根据滚动位置旋转元素，因此在相同的滚动位置旋转将始终相同。

更新资料

您还可以检测到正在使用哪种浏览器，并且仅更新适当的供应商前缀的transform属性：

var venderPrefix = ($.browser.mozilla) ? '-moz-' :
                   ($.browser.webkit) ? '-webkit-' :
                   ($.browser.msie) ? '-ms-' :
                   ($.browser.opera) ? '-o-' : '';

$(window).scroll(function(event){
   $("img").css(venderPrefix + "transform", "rotate(" + $(this).scrollTop() + "deg)");
});

这是一个演示：http://jsfiddle.net/EnSkJ/6/