Question

我想尝试制作一个滑动菜单。

我希望将鼠标悬停在徽标容器上以将其向上滑动，并在动画完成后向下滑动菜单。当鼠标离开徽标时 - 容器菜单将向上滑动，当动画将被完成时，徽标将向下滑动

鼠标悬停 1）徽标（slideUp） - 等到动画完成 - 2）菜单（slideDown）当鼠标关闭 1）菜单（slideUp） - 等到动画完成 - 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)

我已经制作了一些东西，但是动画有问题需要等待

Answer 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');

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

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

Jquery slideDown / Slide up菜单

1 个答案: