Question

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

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

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;
}

有没有办法让它们在没有明显“加速慢动画”的情况下达到相同的速度？

这显然不是什么大事，但如果可以修复，那就太好了。

由于

Answer 1

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

Answer 2

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

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

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

Answer 3

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

jQuery动画速度与CSS3转换速度不匹配

3 个答案: