Question

我有一个带有动画的汉堡菜单。当我再次单击汉堡菜单时（从菜单中退出后），菜单显示为无动画。

我认为它是由.animate引起的-我需要制作.toggle

$(document).ready(function() {
  $("#openMenu").click(function() {
    $("#main").toggle(200);
    $("#menuSection").toggle(200);
    $(".menu").animate({ left: "2%" });
  });
});

CSS：

.menu {  
height: 100px;   
width: 0px;  
background-color: #450a5a;  
display: flex;   
position: absolute;   
left: -50%;   
cursor: pointer; 
pointer-events: none;   
transition: all 0.5s; 
}

Answer 1

我假设您再次点击#openMenu元素，以在打开菜单时触发菜单关闭动画。再次调用您的代码中的.animate ，. menu元素的样式设置为left: 2%;后，将不会进行任何更改。您必须实现根据菜单是否打开而触发“ out”动画或“ in”动画的代码。

$(document).ready(function() {
    $("#openMenu").click(function() {
        $("#main").toggle(200);
        $("#menuSection").toggle(200);
        var menu = $(".menu");
        if (menu.css("left") == "2%") { //if the "in" animation was already performed
            menu.animate({ left: "0%" }); //revert back to normal
        } else {
            menu.animate({ left: "2%" }); //perform "in" animation
        }
    });
});

如何从.animate制作.toggle

1 个答案: