使用jQuery切换CSS动画？

Question

我正在制作一个简单的向下移动菜单，我希望它可以将整个网站向下移动275px，以便为移动菜单留出空间。 减小浏览器的宽度，直到您可以在右上角看到列表图标。 然后，单击它。 您会注意到，整个网站（globe类中的所有内容）都通过-webkit-animation（是jquery noob）向下移动了275个像素。 您还应该注意到动画的简便性； 与再次按下时的突然移动相反。 如果您继续切换图标，将会看到不同之处。 我希望Globe类以某种方式切换该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");
    }
});