jQuery slideDown on mobile producing wrong <li> heights, requiring two taps to slideUp

Question

I'm using jQuery's slideDown function to animate a hidden menu on mobile devices, and I've got an interesting problem. When the menu slides down, the correct spacing between the list items isn't being applied. When I tap on the icon for closing the menu, the spacing corrects, and then a second tap closes the menu. I've never seen this before. Here is the HTML (this is a Drupal site, hence the tons of markup):

<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" />

Here is the jQuery:

$("#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);
});

Any advice is greatly appreciated.

Answer 1

My advice is to not use slideUp() and slideDown(), I would instead use css transitions to perform this animation. In my experience css driven animations perform much better and are more dynamic.Here is some information on css transitions. Although slideup and slidedown are nice quick solutions, I've found their performance is poor in most scenarios.

Heres an example of how to implement a css transition likes this:

CSS:

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

JS:

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