Javascript Jquery向下滑动/向上滑动菜单

我想做一份滑动菜单

我想在标志容器上悬停，将其向上滑动，动画完成后，将其向下滑动菜单。当鼠标离开徽标容器时，菜单将向上滑动，当动画结束时，徽标将向下滑动

鼠标悬停 1） 标志（幻灯片） -等待动画完成- 2） 菜单（向下滑动） 当鼠标离开时 1） 菜单（幻灯片） -等待动画完成- 2） 洛多（向下滑动）

Html

---

我做了一些事情，但对动画完成等待有问题

以下是我提出的解决方案，我对jQuery做了一些调整

---

希望这就是你想要的。

我想你可能想寻找CSS3动画，而不是当你们发表评论时，必须留下评论。那不是玩笑！我认为这个问题值得学习，OP迄今为止已经尝试过了

<div id="header">

    <div class="navigation_menu_hide">
        <div class="content">
            <ul>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
            </ul>
        </div>
    </div>

    <div class="logo_show">
        <div class="content">
            <img src="http://img2.russia.ru/upimg//news/19986/top2.jpg" alt="">
            <span>Menu</span>             
        </div>
    </div>

</div>

$("#header").hover(function(){

    $('.logo_show').slideUp('300', function(){
        $('.navigation_menu_hide').slideDown('300');
    });
},function(){
    $('.navigation_menu_hide').slideUp('200');

    $('.logo_show').stop(true, true).slideDown('300');
});

$(document).ready(function() {

$('.logo_show').hover(function(){
    $(this).slideUp('300');
    $('.navigation_menu_hide').stop(true, true).slideDown('300', function() {

        $('.navigation_menu_hide').mouseleave(function() {   
               $(this).slideUp('200');
              $('.logo_show').slideDown('300');

      }); 
    });
  });
});