jQuery burger 菜单有效，但没有动画。只有“跳跃”打开

Question

我有一个汉堡菜单，它出现在第二个媒体查询中，当屏幕尺寸达到 600 像素左右时，它看起来就像我想要的那样并且运行良好，但我无法让它为“幻灯片”设置动画 - 当单击burger icon 菜单只是跳出来，而不是一个漂亮的幻灯片，这本来是代码应该做的。有什么帮助吗？我确定我错过了一些我看不到的小东西。

<div id="burgermenu">
        <img src="images/burger-icon.png" id="button" width="50px" style="display: block; float: right;">
    </div>

    <div id="burgermenuclose">
        <img src="images/burger-icon-close.png" id="buttonclose" width="50px" style="display: block; float: left;">
        <div id="navigationContainer">
            <a href="index.html"><p id="mobile-navigation-title">Home</p></a>

            <a href="#"><p id="mobile-navigation-title">About</p></a>
            <a href="about.html"><p id="mobile-navigation">Staff</p></a>
            <a href="faq.html"><p id="mobile-navigation">What we do</p></a>

            <a href="#"><p id="mobile-navigation-title">Research</p></a>
            <a href="team.html"><p id="mobile-navigation">Global health</p></a>
            <a href="news.html"><p id="mobile-navigation">Population change</p></a>
            <a href="contact.html"><p id="mobile-navigation">Low fertility</p></a>
            <a href="about.html"><p id="mobile-navigation">Female international migration</p></a>
            <a href="faq.html"><p id="mobile-navigation">Demandside financing</p></a>

            <a href="#"><p id="mobile-navigation-title">Post graduate training</p></a>
            <a href="team.html"><p id="mobile-navigation">PhD</p></a>
            <a href="news.html"><p id="mobile-navigation">Masters</p></a>
            <a href="contact.html"><p id="mobile-navigation">Short courses</p></a>

            <a href="#"><p id="mobile-navigation-title">News</p></a>
            <a href="team.html"><p id="mobile-navigation">Seminars</p></a>
            <a href="news.html"><p id="mobile-navigation">Jobs &amp; bursaries</p></a>

            <a href="#"><p id="mobile-navigation-title">Projects</p></a>
            <a href="contact.html"><p id="mobile-navigation">MRC Global maternity &amp; child health</p></a>
            <a href="about.html"><p id="mobile-navigation">Newton institutional link award</p></a>
            <a href="faq.html"><p id="mobile-navigation">ESRC low fertility</p></a>

            <a href="team.html"><p id="mobile-navigation-title">Contact</p></a>
        </div>
    </div>

    <script>
 $("#burgermenuclose").hide();
 $("#button").click(function(){
    $("#burgermenuclose").animate({left: '250px;'});
    $("#burgermenuclose").show();
 });

 $("#menutext").click(function(){
    $("#aboutWrapper-mobile").animate({left: '250px'});
    $("#burgermenuclose").show();
 });

 $("#buttonclose").click(function(){
    $("#aboutWrapper-mobile").animate({left: '0px'});
    $("#burgermenuclose").hide();
 });

 $("#menutextclose").click(function(){
    $("#aboutWrapper-mobile").animate({left: '0px'});
    $("#burgermenuclose").hide();
 });
</script>

CSS

       #burgermenu{
       height: 70px;
       width: 40%;
       margin: 0 auto;
       padding: 10px;
       float: right;
       display: block;
      }

#burgermenuclose{
height: 100vh;
width: 50%;
background-color: #222e5b;
margin: 0 auto;
box-shadow: 0px 3px 8px darkgray;
top: 0;
overflow: scroll;
right: 0;
position: fixed;
z-index: 200;
}

#menutext{
text-decoration: none;
color: #0e0e0e;
font-size: 20px;
font-family: "Trebuchet MS";
display: block;
float: left;
font-weight: normal;
margin: 0;
padding-top: 14px;
margin-left: -10px;
cursor: pointer;
}

#button{
cursor: pointer;
margin-top: 10px;
margin-right: 20px;
}

#buttonclose{
cursor: pointer;
margin-top: 20px;
margin-left: 20px;
}

#menutextclose{
text-decoration: none;
color: #0e0e0e;
font-size: 20px;
font-family: "Trebuchet MS";
display: block;
float: left;
font-weight: normal;
margin: 0;
padding-top: 14px;
margin-left: -10px;
cursor: pointer;
}

#navigationContainer{
width: 100%;
height: auto;
margin-top: 100px;
}

#mobile-navigation{
font-family: 'Trebuchet MS';
font-size: 18px;
color: #9a9a9a;
line-height: 3;
text-align: left;
padding-left: 30px;
font-weight: 100;
height: 60px;
transition: 0.2s;
margin: 0 !important; 
}

#mobile-navigation:hover{
font-family: 'Trebuchet MS';
font-size: 18px;
color: #ffffff;
line-height: 3;
text-align: left;
padding-left: 10px;
background-color: #dc9720;
height: 60px;
font-weight: 100;
}

#mobile-navigation-title{
font-family: 'Trebuchet MS';
font-size: 20px;
color: #ffffff;
line-height: 3;
text-align: left;
padding-left: 10px;
font-weight: 700;
height: 60px;
transition: 0.2s;
margin: 0 !important; 
}


<script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

250px 不是获得所需输出的正确值，但动画不正确的原因是您在下面的代码中在 250px 之后使用了分号

 $("#burgermenuclose").hide();
 $("#button").click(function(){
     $("#burgermenuclose").animate({left: '250px;'});
     $("#burgermenuclose").show();
 });

删除该分号，它似乎可以正确动画

我可能会补充一点，您实际上可以将 div 向左移动 250 像素

$("#burgermenuclose").hide();
$("#button").click(function(){
    $("#burgermenuclose").animate({left: '+=250px'});
    $("#burgermenuclose").show();
});

-=250px 也一样。