Animate и исчезать, одновременно, по щелчку

Question

Вот что у меня есть:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
    $("#toggle").click(function() { 
     $(this).toggleClass("on"); 
     $("#m_1").fadeToggle(150); 
    }); 
</script> 

Это меню, которое выцветает по щелчку. Я бы хотел, чтобы он шел от margin-top: -80px; до margin-top:80px, когда его нажимают «на», но наоборот, когда его нажимают «выключить», все с медленным угасанием.

Я не слишком опытен с кодированием, поэтому мне жаль, если это кажется несовершеннолетним.

Answer 1

Вы можете запускать различные анимации в зависимости от состояния on класса

$("#toggle").click(function() { 
    //run the stop to make sure the animation isnt already running 
    $(this).stop(true, true) 
    //fire the animation based on the class state 
    if ($(this).hasClass('on')) $(this).animate({margin-top : '80px'}); 
    else $(this).animate({margin-top : '-80px'}); 

    //toggle the class 
    $(this).toggleClass("on"); 

    $("#m_1").fadeToggle(150); 
}); 

Вы можете добавить непрозрачности пуговицу к .animate вызова, а также, если вы хотите. зависит от того, что $("#m_1").fadeToggle(150); делает