用jQuery切換CSS動畫？

Question

我正在製作一個簡單的下拉菜單，並且我希望它將整個網站向下移動275px，因此它可以爲手機菜單留出空間。使瀏覽器寬度變小，直到您可以看到右上角的列表圖標。然後，點擊它。您會注意到整個網站（全球課程中的所有內容）都通過-webkit-animation（Im a jquery noob）向下移動了275個像素。您還應該注意動畫的輕鬆;與再次按下時突然移動相反。如果你不斷切換圖標，你會看到不同之處。我希望地球類能夠切換該css動畫的一些方式;所以當你切換圖標時，它會小心從275px過渡到0px。

$("#mobile").click(function() { // when icon is clicked, do the following: 
    $("#m-nav").slideToggle(300); // side down the navigation 
    $("#globe").toggleClass("translation"); // slide down the whole site 275px 
}); 

這裏是小提琴:: http://jsfiddle.net/7V5W5/3/

Answer 1

你不是已經在代碼中添加反向動畫：http://jsfiddle.net/7V5W5/13/

$("#mobile").click(function() { 
    $("#m-nav").slideToggle(300); 
    if ($('#globe').hasClass('translation')) { 
     $("#globe").removeClass("translation").addClass("translation-reverse"); 
    } else { 
     $("#globe").removeClass("translation-reverse").addClass("translation"); 
    } 
});