Jquery slideDown / Slide up menu

Question

I ma trying to make a sliding menu.

I want hovering on logo-container to slide it up and when animation is finished slide down menu. When the mouse will be out of logo-container menu will slide up and when animation will be finisded logo will slide down

on mouse hover 1) logo (slideUp) - wait until animation compleate - 2) menu (slideDown) when mouse off 1) menu (slideUp) - wait until animation compleate - 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)

I have made something but have issue with animation compleate waiting

When you guys give the votedown must leave the comment. That's not joke! I think this question is good to learn and OP have tried so far — Ringo, Dec 19 '13 at 08:50

score 0 · Answer 1 · answered Apr 14 '14 at 01:36

Here is what I came up with as a solution I tweaked the jQuery a bit 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');

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

Hope that is what you were looking for.

Jquery slideDown / Slide up menu

1 Answers1