jQuery缓解Firefox中窗口滚动的动画（bug还是我的坏？）

示例
首先也是最重要的，这是我的代码和问题：

问题
我看到的是，当你点击左边的按钮时，窗口会滚动到相应的标题。在除Firefox（包括IE gasp）以外的所有浏览器中，这都非常流畅。但是，如果降低窗口的高度，所有计算机上的窗口都会变得平滑。我已经在多台计算机上以及IE7-8、谷歌浏览器、Safari和Firefox 3.5上试过了。我已经消除了页面上的所有图形和颜色，所以这些都不是问题所在。我已经摆脱了你后面的边栏，不是这样的

理论
我认为jQuery插件会计算出你需要移动的距离，然后将它需要移动的像素数除以指定的持续时间单位（比如30毫秒内300像素，所以是10px/ms）。其他浏览器似乎都能实现平滑过渡，但Windows scroll事件提供的粒度可能不够压缩，Firefox无法实现平滑过渡？或者我使用了错误的放松插件，或者设置错误

代码

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

逻辑

向sidenav onClick上的每个a标记添加一个事件侦听器。这将获得文档中与该链接的href属性具有相同ID的元素的offset（）.top，然后从当前scrollTop到该元素的offset（）.top设置动画。逻辑是合理的，在除Firefox之外的所有浏览器中都能顺利运行。。。据我所知

请求

我做错了什么？这是虫子吗

谢谢

更新

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

好吧，凭良心说，我不能选择这里给出的任何答案，因为没有一个答案真正解决了这个问题，所以如果你遵循这一点，选择你最喜欢的，奖金将流向得票最多的人

问题似乎在于Firefox a）呈现透明度和b）处理滚动事件的方式。有了足够的处理器能力，这可能不是问题，但让我伤心的是，IE（所有浏览器中的）能够在劣质硬件上表现出如此出色的性能。我会向Mozilla咨询这个问题，看看他们是否有什么要说的

对于额外的熏陶，免费提供以下内容：

编辑：问题已经回答了，但现在我不能选择它。有人知道这是怎么回事吗

最终更新

---

他们让我拿回赏金的时间已经足够长了，所以我选择了正确的答案。它看起来像是盒子阴影和一些其他的效果在firefox中引起了一些滚动问题，因为它们的渲染方式。FF4.0+处理得更好，但有些计算机仍然存在问题。这对于实现CSS3的人来说是一个很好的提示：在所有浏览器上测试交互，看看性能成本是否合理。

您的页面有两个背景（一个是透明的.png

---

问题在于firefox和/或处理动画的机器。检查Firefox的平滑滚动选项（工具->选项->高级->常规->使用平滑滚动）。这可能是因为每当我尝试使用类似的效果时，都会将其选中…

。也许这会有帮助

---

请尝试jQuery 1.4。这似乎比jQuery 1.3.2快得多

---

如果需要调试此类内容，请将未压缩的js文件放入代码中，并使用Firebug及其配置文件来配置函数。

如果删除此属性的任何声明（或使用Firebug禁用它们），则性能差似乎是由

-moz box shadow

属性造成的滚动动画要平滑得多。

我在FF 3.5中也遇到过同样的问题-看起来肯定是渲染问题。 如果你尝试一下新的3.6版本，它可能就可以了

我对doherty的尾波滑块2.0 btw有意见

问候

---

Andrej在Firefox 3.6 RC2 Mac OS上运行良好X@Paolo：嗯，也许是在3.6中修好的，我下一步再查。谢谢你的提醒。@Paolo:不，看起来还是个问题。要了解我的意思，请将窗口缩小到大约400像素高，然后点击按钮查看比较。这其实没什么大不了的，但我很挑剔，我想我已经发现了一个潜在的漏洞，无论是jquery动画的方式还是firefox对动画的理解方式。@NateDSaint:我看不出Safari 4.04和firefox 3.6 RC2之间有什么区别。我在使用这两个选项的地方录制了这个屏幕：这可能不重要，但在每个

窗口上。滚动
事件，尝试淡入或淡出“顶部”链接。当您单击其中一个链接或滚动页面时，Firefox将启动多个
窗口。滚动
事件。如果链接当前可见，那么我不认为jQuery会对其他淡入动画进行排队，但当它隐藏时，您将以多个淡入动画排队结束。1）我意识到背景可能未优化，但我已将它们都关闭，问题仍然存在。如有必要，我可以提供一个例子。2） 我把它打开了，它还在做。你没有看到firefox和你电脑上其他浏览器在动画方面的区别吗？试着将它加载到另一个浏览器（例如，Chrome，Safari）中，看看有什么不同。我可以看到不同。。。但是我的火狐很重。。所以我认为这是firefox的事。。不是你做的事。。你尝试过firefox的平滑滚动选项吗？是的，你也可以通过转到about:config，然后在过滤器中搜索平滑滚动并在那里检查它。起初我认为这是一个优化问题，但我打开了一个网站