Jquery slideDown / 上滑菜单答案

【问题标题】：Jquery slideDown / Slide up menuJquery slideDown / 上滑菜单
【发布时间】：2013-12-19 08:44:02
【问题描述】：

我正在尝试制作滑动菜单。

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

鼠标悬停 1) 标志（上滑） - 等到动画完成 - 2) 菜单 (slideDown) 鼠标关闭时 1) 菜单（上滑） - 等到动画完成 - 2) lodo (slideDown)

HTML

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

jQuery

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

Demo - what I have now (jsfiddle)

我做了一些东西，但动画完成等待有问题

【问题讨论】：

我想你可能想寻找 CSS3 动画来代替
当你们投反对票时必须留下评论。这不是开玩笑！我认为这个问题很好学，到目前为止，OP 已经尝试过了

标签： javascript jquery jquery-animate slidedown slideup

【解决方案1】：

这是我想出的解决方案，我稍微调整了 jQuery DEMO

$(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');

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

希望这就是你要找的东西。

【讨论】：