Question

我有一个汉堡菜单，它出现在第二个媒体查询中，当屏幕大小达到600px左右时，它看起来就像我想要的那样效果很好但我无法让它为幻灯片制作动画＆＃39 ; - 当点击汉堡图标时，菜单只是跳出来，而不是一个漂亮的幻灯片，这本来是代码应该做的。有帮助吗？我确定我错过了一些我无法看到的小事。

<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向左移动250px

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

同样适用于-=250px。

jQuery汉堡菜单可以工作，但没有动画。只有＆＃39;跳跃＆＃39;打开

1 个答案: