Javascript 悬停时的连续动画（性能）

我创建了一个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);
    }
);

显然，我每8毫秒运行一次这个函数，这要求很多。我已经在缓存我的选择器，所以我不知道我能做些什么来提高性能。我是不是走错了路？

是个好办法。例如：

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

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

功能播放（）{
$（'#ball'）。设置动画（{左：'+=20'}，100，'线性'，播放）；
}
函数暂停（）{
$（'球'）.stop（）；
}
$（“#条”）。悬停（播放，暂停）
#条{
边缘顶部：20px；
背景：#444；
高度：20px；
}
#酒吧：悬停球{
背景：浅绿色；
}
#球{
位置：相对位置；
左：0；
宽度：20px；
高度：20px；
背景：红色；
边界半径：50%；
}

这就是JavaScript的动画状态。你可以做的一件事是降低“帧速率”。jQuery的默认值是每帧13毫秒。我建议至少75毫秒。也可以考虑使用<代码>请求动画框架< /> >作为回退<代码> SETTIMEOUT 而不是<代码> SETIFATION< /COD>。这篇文章包括一个垫片->我几乎回答了同样的问题。我们错过了什么：OP想要一个连续的动画（直到悬停结束）。另外，animate（）需要一个“duration”参数。简单而优雅！感谢您的帮助。+1用于JSFIDLE演示。这对初级/中级JQuery开发人员非常有用。谢谢。在那里使用translateX会对性能产生影响吗？更新->似乎您只能设置基本属性的动画。@artdias90编辑了我的答案，以反映CSS3解决方案的
translate
感谢您提供的可靠答案/解决方案Roko！对于感兴趣的人，我进一步改进了CSS动画JSFIDLE示例，使其不含javaScript。