Javascript Animate Performance

我的js在这里遇到了一些问题。

它运行正常，但在某些情况下性能太慢。

我轻轻地滚动到底部，但是当我尝试再次向上滚动时，它会非常缓慢地滚动。

我该怎么做才能提升性能？

谢谢！

$(function(){ var windowHeight = $(window).height(); var windowWidth = $(window).width(); var sectionsNumbers = $("#content section").length-1; var sectionCount = 0; // Scroll sets var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth; var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight; $("#content").css("width", windowScrollX+windowWidth); $("#content").css("height", windowScrollY+windowHeight); $(".illusion1").css("width", windowScrollX+windowWidth); $(".illusion1").css("height", windowScrollY+windowHeight); // Set mask w and h $("#mask").css("width", windowWidth); $("#mask").css("height", windowHeight); $(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight); $("#content section").each(function() { // Defines its width and height $(this).css("width", windowWidth); $(this).css("height", windowHeight); // Defines its position $(this).css("left", sectionCount*windowWidth); $(this).css("top", sectionCount*windowHeight); sectionCount++; }); // When window scrolls $(window).scroll(function(){ var curScrollTop = $(window).scrollTop(); var angleVar = windowScrollX/windowScrollY; $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'}); $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'}); //{duration: 1500, easing: 'easeOutQuart'} }); }); 

Answer 1

你不是在你的动画中缓存选择器（并且反复使用$（this）或$（’＃mask’）也是浪费），所以每次用户滚动时，它/搜索整个dom / for #content，＃ illusion1。 此外，滚动动画有点多余，因为滚动本身就是一种“动画”。 固定定位将是理想的，但您可以通过在每个滚动上设置CSS样式来实现相同的效果。 只是不要在每个滚动事件上使用动画。 此外，你没有为左和上提供’px’，这样做可以防止需要通过添加“ – ”+来“强制转换”为字符串。 尝试重写$（window）.scroll函数，如下所示：

 var $window = $(window), $content = $("#content"), $illusion = $(".illusion1"); $window.scroll(function(){ var curScrollTop = $window.scrollTop(); var angleVar = windowScrollX/windowScrollY; $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' }); $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' }); }); 

如果您的心脏设置了动画效果，请考虑去抖/节流方法。 不要在每个滚动事件上设置动画，而是使用：“timeout = setTimeout（function（）{…}，25）”将在允许超时到期时执行动画，并且在滚动时只需clearTimeout（超时）和再次设置超时。 动画将不是实时的，因为除非用户停止滚动25ms，否则它将永远不会被执行。

Answer 2

不确定这是否有帮助，但是当我必须在滚动时相对于浏览器窗口移动元素时，我使用某种forms的固定定位。 我发现这在Chrome和其他浏览器中提供了比尝试设置或动画绝对或相对定位元素的偏移量更好的性能。 也许如果你可以掀起一个说明你想要实现的效果的jsfiddle ，我可以提供一些进一步的建议。

编辑：如果你可以提供一些HTML代替jsfiddle也会有所帮助。

Answer 3

我会说将整个包更改为TweenLite，它比动画的jQuery运行更顺畅。

http://www.greensock.com/v12/

你可以比较下面的差异。

http://www.greensock.com/js/speed.html