Animate существующего выпадающее меню по щелчку

Question

Это HTML

<header> 
    <a class="show-menu">Menu</a> 
    <nav> 
    <a>anchor1</a> 
    <a>anchor2</a> 
    <a>anchor3</a> 
    </nav> 
</header> 

CSS-в настоящее время скрывает нав якоря, пока кнопка не будет нажата, то JQuery переключает атрибут класса, чтобы изменить дисплей: Нет для отображения: блок ,

Это текущая JS, которая успешно отображает список, когда нажата кнопка «Меню», но я пытаюсь ее анимировать, так что при нажатии кнопки список сдвинется в нужное положение.

$(function() { 
    $('a.show-menu').click(function() { 
    $('header nav').toggleClass('active'); 
    }); 
    }); 

Answer 1

$(function() { 
    $('a.show-menu').click(function() { 
    $('header nav').slideToggle(function(){$(this).toggleClass('active')}); 
    //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^and toggle your class if you want 
    //or can you use simple slideToggle(); 
    }); 
    }); 

ссылка slideToggle()

Answer 2

JQuery UI расширяет JQuery родной toggleClass принимать второй необязательный параметр: Длительность

toggleClass(class, [duration]) 

Documentation.

Answer 3

Как насчет JQuery перек?

$(function() { 
    $('a.show-menu').click(function() { 
    $('header nav').slideToggle(); 
    }); 
    }); 

http://jsfiddle.net/5FZmd/