使用jQuery切换CSS动画

Toggle CSS animation with jQuery?

本文关键字：动画 CSS 切换 jQuery 使用      更新时间：2023-09-26

我正在制作一个简单的向下滑动的移动菜单，我希望它能将整个网站向下移动275px，这样它就可以为移动菜单留出空间。缩小浏览器宽度，直到可以看到右上角的列表图标。然后，点击它。你会注意到整个网站（地球仪类中的所有内容）通过-webkit动画（Im a 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/

您没有在代码中添加反向动画：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");
    }
});
相关文章：