0

我有一个元素，我正在使用 jquery/css3 在滚动时旋转。问题是当你滚动时它有点跳动，当你停止时它立即停止。我希望它更流畅地播放旋转，当您开始滚动时开始，然后在您停止滚动后逐渐停止，而不是每次滚轮移动时仅旋转一组度数。我的代码和链接如下：

http://pollenbrands.com/rjj/（向下滚动至 100% 水果）

var angle = 1;
jQuery(window).scroll(function() {
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)');
    angle+=6;
    if(angle==360) {
        angle=0;
    }
});
4

4 回答 4

1

您是否尝试过使用 .animate？这可能会帮助您控制这种行为。

于 2012-04-16T17:18:07.990 回答
0

实现此目的的一种粗略而快速的方法是延迟滚动处理程序的执行。

$(window).scroll(function() {
    setTimeout(function(){
        //Call scroll functionality here..
    }, 300);
});
于 2012-04-16T17:28:14.140 回答
0

我同意neuDev33。对滚动功能使用动画和缓动。像easeOutCirc 这样的东西可能会很好用。这里有一个很棒的备忘单。

http://easings.net/

于 2013-06-25T14:41:26.163 回答
0

似乎问题可能在于将动画附加到滚动功能。每次用户滚动时都会调用它，因此它会在前一个有机会完成之前开始一个新的转换。当用户第一次滚动时，您可能想尝试触发一个更长的事件（例如旋转更大的度数），然后推迟任何未来的事件，直到第一个事件有时间完成。根据您的缓动函数，您可以使用带有标志的 setTimeout() 方法。

于 2012-04-16T17:21:35.680 回答