Цепочки анимации в jQuery

Question

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

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

В двух словах, вот что я хотел бы выполнить:

1. При загрузке документа, скрыть неупорядоченный список, содержащий пункты меню. В то же время измените непрозрачность пунктов меню на 0.
2. Когда щелкнут элемент переключения меню, сначала опустите меню, сдвинув его вниз (используя режим слайда), затем постепенно исчезайте в пунктах меню с полной непрозрачностью.
3. Когда меню открыто и щелчок на элементе переключения, выйдите из пунктов меню, вернув их в нулевую непрозрачность, а затем закройте закрытие меню, сдвинув его назад.

Вот HTML:

<p class="menu-toggle"><a href="#">Toggle</a></p> 
<ul class="menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

CSS-:

.menu-toggle { 
    width: 100%; 
    background: aqua; 
    margin: 0; 
    padding: 0; 
} 
.menu { 
    width: 100%; 
    background: orange; 
    margin: 0; 
    padding: 0; 
    display: none; 
} 

И JavaScript:

$(document).ready(function() { 

    // set some variables 
    var menu_toggle = $('.menu-toggle'); 
    var menu = $('.menu'); 
    var menu_li = menu.find('li'); 

    // hide the menu as soon as the DOM is ready 
    menu.hide(); 

    // change the initial opacity of the menu items 
    menu_li.css({ 
     opacity: 0 
    }); 

    // toggle the menu on clicking the control 
    menu_toggle.click(function() { 
     menu.slideToggle(500, function() { 
      menu_li.animate({ 
       opacity: 1 
      }, 500); 
     }); 
     return false; 
    }); 

}); 

Наконец, вот jsfiddle: http://jsfiddle.net/EYmPA/

С текущим кодом я выполнил # 1 сверху. Я выполнил # 2, но только в первый раз щелкнул элемент переключения. После этого будет работать только слайд меню. И, наконец, № 3 работает только частично; анимация закрытия меню отлично работает, но элементы списка не исчезают по мере необходимости.

Я уже давно работаю над этим и не могу получить желаемого эффекта. Любые идеи о том, как сделать эту работу по назначению, будут очень оценены.

Answer 1

Я изменил код:

var menuShown = 0; 
// toggle the menu on clicking the control 
menu_toggle.click(function() { 
    if(menuShown){ 
     menu.slideUp(500, function(){ 
      menu_li.animate({opacity: 0}, 500); 
      menuShown = 0; 
     }) 
    }else{ 
     menu.slideDown(500, function(){ 
      menu_li.animate({ opacity: 1}, 500); 
      menuShown = 1; 
     }); 
    } 
    return false; 
}); 

Вот DEMO