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

Question

我有一个导航菜单，其中包含 CSS3 转换速度为 0.2 秒的链接。当这些链接悬停时，它们的子菜单使用 jQuery 使用 fadeIn 和 fadeOut 方法显示，速度也为 0.2s(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;
}

有没有一种方法可以使它们的速度相同，而无需执行明显的“加快较慢的动画速度”？

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

谢谢

Answer 1

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