用 jQuery 切换 CSS 动画？

Question

我正在制作一个简单的向下滑动移动菜单，我希望它将整个网站向下移动 275 像素，以便为移动菜单留出空间。缩小浏览器的宽度，直到可以看到右上角的列表图标。然后，单击它。您会注意到整个站点（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");
    }
});