Animation des elements d'un menu un par un

anim-menu.css

.menu-haut ul li{
  display: inline-block;
  opacity: 0;
  visibility: hidden;
}

anim-menu.js

/**
*
*  Animation Menu
*
*/


// constructeur

function AnimMenu(element,fadeInTime,fadeOutTime,staggerTime){
  this.menuElement = element;
  this.fadeInTime = fadeInTime;
  this.fadeOutTime = fadeOutTime;
  this.staggerTime = staggerTime;

  /**
  *
  * Affiche les  elements du menu depuis la fin vers le début
  *
  */
  this.showMenu = function (){
    var i = 0;
    var that = this;
    $(this.menuElement.get().reverse()).each(function(i){

      var $that = $(this);
      setTimeout(function() {
        $that.animate({
          opacity: 1
        },that.fadeInTime);
      }, i * that.staggerTime);

    });
  };

  /**
  *
  * Cache les elements du menu depuis le début vers la fin
  *
  */
  this.hideMenu = function (){
    var i = 0;
    var that = this;
    $(this.menuElement).each(function(i){

      var $that = $(this);
      setTimeout(function() {
        $that.animate({
          opacity: 0
        },that.fadeOutTime);
      }, i * that.staggerTime);

    });

  };

}

var mkMenu = new AnimMenu($('.menu-haut ul li'),300,300,200);

//mkMenu.showMenu();
//mkMenu.hideMenu();

index.html

<nav class="menu-haut">
    <ul>
      <li><a href="#">item</a></li>
    </ul>
</nav>