javascript - 使用 jQuery 切换 CSS 动画？

Question

我正在制作一个简单的向下滑动移动菜单，我希望它将整个网站向下移动 275 像素，以便为移动菜单腾出空间。缩小浏览器的宽度，直到您可以在右上角看到列表图标。然后，单击它。您会注意到整个站点(globe 类中的所有内容)都通过 -webkit-animation 向下移动了 275 像素(我是一个 jquery 菜鸟)。您还应该注意到动画的轻松程度；与再次按下时的突然运动形成对比。如果您不断切换图标，您会看到不同之处。我希望 globe 类以某种方式切换该 css 动画；因此，当您切换图标时，它会小心翼翼地从 275 像素过渡到 0 像素。

$("#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 
});

这是 fiddle ::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");
    }
});