我正在制作一个简单的向下移动菜单,我希望它可以将整个网站向下移动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/

===============>>#1 票数: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");
    }
});

  ask by Matthew translate from so

未解决问题?本站智能推荐: