[WebCafe]

Все работает прекрасно. Но только один раз. Один mouseenter и один mouseleave. Потом #icon не скрывается при наведении, мигнет один раз и остаётся на месте, как будто срабатывает fadeout(), а потом сразу fadein(). Подскажите в чём может быть проблема?

$(document).ready(function() {
                $("#menu").mouseenter(function() {
                                $("li#icon").fadeOut(200, function() {$("div#menu").animate({width: "200px"}, function() {$(".menu_item").fadeIn();});});
                    }
                );
                $("#menu").mouseleave(function() {
                                $(".menu_item").fadeOut(200, function() {$("div#menu").animate({width: "50px"}, function() {$("#icon").fadeIn()});});
                    }
                );
            })

<div class="menu" id="menu">
      <nav>
            <ul>
                 <li class="icon" id="icon">|||</li>
                 <li class="menu_item">главная</li>
                 <li class="menu_item">о компании</li>
                 <li class="menu_item">портфолио</li>
                 <li class="menu_item">контакты</li>
                 <li class="menu_item">услуги</li>
                 <li class="menu_item">сделать заказ</li>
           </ul>
     </nav>
</div>

по задумке при наведении на блок должна скрываться иконка, затем расширяться блок с меню, а после этого появляться в нём элементы.