jQuery在移动设备上向下滑动产生错误的高度，需要两次轻触才能滑动

我正在使用jQuery的slideDown函数在移动设备上设置隐藏菜单的动画，我遇到了一个有趣的问题。当菜单向下滑动时，列表项之间的正确间距不会被应用。当我点击用于关闭菜单的图标时，间距会更正，然后第二次点击关闭菜单。我以前从未见过这种情况。这是一个HTML，这是一个Drupal站点，因此有大量的标记：

<div id="navigation">
  <ul id="main-menu" class="links inline clearfix">
    <li class="menu-218 first"><a href="/">Home</a></li>
    <li class="menu-451"><a href="/bio">Bio</a></li>
    <li class="menu-461 active-trail active"><a href="/classes" class="active-trail active">Classes</a></li>
    <li class="menu-464"><a href="/portfolio">Portfolio</a></li>
    <li class="menu-476 last"><a href="/contact">Contact</a></li>
  </ul>
  <img id="nav-arrow-up" src="sites/all/themes/zoakland/assets/nav-arrow-up.png" alt="nav-arrow-up" width="30" height="21" />
</div>
<img id="nav-arrow-down" src="sites/all/themes/zoakland/assets/nav-arrow-down.png" alt="Show navigation menu" width="30" height="21" />

非常感谢您的建议。

我的建议是不要使用slideUp和slideDown，而是使用css转换来执行此动画。根据我的经验，css驱动的动画表现得更好，更具动态性。虽然slideup和slidedown是很好的快速解决方案，但我发现它们在大多数情况下的性能都很差

下面是一个如何实现css转换的示例，如下所示：

CSS:

JS:

---

谢谢这真的很有帮助，有几个调整：元素上的transition属性必须是-webkit transition才能在iOS上工作，position属性也需要设置，我使用了“relative”。此解决方案有一个很大的限制，即.slidedown的固定高度。因为我的客户使用的是CMS，所以菜单div的高度需要灵活。我会努力的，好的！通过将max height on.element设置为0，max height on.slidedown设置为500px，使盒子的高度变得灵活。我很高兴这有帮助，另一个建议是研究硬件加速转换以优化性能。这是如果动画看起来紧张或不流畅。

$("#nav-arrow-down").click(function() {
  $(this).fadeOut();
  $("#navigation").slideDown(400, function() {
     $("#navigation li").animate({opacity: 1.0}, 500);
  });
});
$("#nav-arrow-up").click(function() {                
  $(this).parent().slideUp(400);
  $("#nav-arrow-down").fadeIn(400);
});

/*inclue transition in the element you want transitioned*/
.element{
width:100px;
height:0px;
opacity:0;
transition:all 1s;
}
/*set custom animation*/
.slidedown{
height:100px;
opacity:1;
}

$('.element').addClass('slideDown');
$('.element').removeClass('slideDown');
OR
$('.element').toggleClass('slideDown');