hover时的连续动画（性能）

我创建了一个jQuery函数，通过减少元素的左边距来滚动DIV。 它有效，但速度非常慢。 它立即吃掉了100％的CPU：s

$(".scroll").hover( function () { var scroll_offset = parseInt($('#content').css('margin-left')); sliderInt = self.setInterval(function(){ $content.css({'margin-left':scroll_offset+'px'}); scroll_offset--; },8); }, function () { clearInterval(sliderInt); } ); 

显然我每8ms运行一次这个function，这是很多问题。 我已经缓存了我的选择器，所以我不知道我能做些什么来提高性能。 我只是走错了路吗？

Answer 1

 function play () { $('#ball').animate({left: '+=20'}, 100, 'linear', play); } function pause () { $('#ball').stop(); } $("#bar").hover( play, pause ); 

 #bar { margin-top: 20px; background: #444; height: 20px; } #bar:hover #ball { background: lightgreen; } #ball { position: relative; left: 0; width: 20px; height: 20px; background: red; border-radius: 50%; } 

Answer 2

.animate（）是一个很好的方法。 例：

 $(".scroll").hover(function(){ $("#content").animate({ marginLeft: "100px", }, 1500 ); });​ 

工作演示

阅读文档以了解如何使用它。