動畫和淡入，同時，在點擊

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);正在做什麼