jQuery 动画速度与 CSS3 过渡速度不匹配答案

【问题标题】：jQuery animation speed not matching CSS3 transition speedjQuery 动画速度与 CSS3 过渡速度不匹配
【发布时间】：2012-05-19 18:09:10
【问题描述】：

我有一个导航菜单，其中包含速度为 0.2 秒的 CSS3 过渡链接。当这些链接悬停时，它们的子菜单会使用 jQuery 显示，使用 fadeIn 和 fadeOut 方法，速度也为 0.2 秒（200 毫秒）。

但是，子菜单的动画效果似乎比链接慢一点。这可能是一种缓和的差异，还是仅仅因为它们是两种完全不同的“动画”方式而产生的差异？

jQuery:

$(document).ready(
  function(){
    $('#nav li').has('ul').hover(
      function(){
        $(this).find('ul').stop(true, true).fadeIn(200);
      },
      function(){
        $(this).find('ul').stop(true, true).fadeOut(200);
      });
});

CSS：

#nav ul li a{
    height: 40px;
    display: block;
    padding: 0 15px;
    background-color: transparent;
    line-height: 40px;
    text-decoration: none;
    color: #ccc;
    text-shadow: 0 -1px 0 #002745;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}

有没有办法在不做明显的“加速较慢的动画”的情况下使它们保持相同的速度？

这显然不是什么大问题，但如果可以解决，那就太好了。

谢谢

【问题讨论】：

你的 CSS 和 jQuery .animate() 代码是什么样的？
如果没有您的 css 动画代码，这很难说。您能为我们做的最好的事情就是在 jsfiddle 中重现它 - jsfiddle.net

标签： jquery animation css transition

【解决方案1】：

我认为您不能期望两种完全不同的触发渲染方式应该具有相同的速度。 jQuery 需要处理开销，而 CSS3 动画将使用内置的渲染引擎。我突然想到 jQuery 的选择器引擎 sizzler 需要找到目标，然后它可能需要考虑浏览器的差异，检查动画队列等。

【讨论】：

是的，我就是这么想的。我只需要加快 jQuery 的速度。
它也可能有助于调整 FX 间隔（但这对持续时间没有帮助）-api.jquery.com/jQuery.fx.interval

【解决方案2】：

这是 jQuery 与 CSS 动画的对比测试：http://css3.bradshawenterprises.com/demos/speed.php

他解释说 CSS 动画比 jQuery 快，因为它们是用 C++ 编译的算法，而不是 JavaScript 需要的运行时算法。

稍后阅读的反驳显示了他使用称为 d3.js 的 JavaScript 框架进行测试的示例，该框架提供了相当的速度。

【讨论】：

正是我要链接的内容！此外，jQuery 现在也可以使用 requestAnimationFrame，所以应该一样快。也许我应该写另一个比较，但使用 jQuery 的新特性……

【解决方案3】：

默认情况下，jQuery 的动画函数，包括fadeIn 和fadeOut，使用easing 的值swing，它使用大致S 形的加速曲线。您可以尝试设置easing: 'linear' 以排除缓动差异的可能性。

【讨论】：