Js - 切换两个 div 和动画一个 div

Question

我正在开发移动菜单，我即将完成代码。还没有完成，因为我的js中有一个小问题：有时，切换动画的按钮不会改变，它会破坏菜单。

我认为这只是一个简单的切换顺序，或者“, ; }”丢失或位置错误...

本周开始学习js，这4个小时一直在尝试自己解决，但没有成功。你们能帮帮我吗？！这是代码和 JSFiddle.

• HTML

<div id="mobilecabecalho">SITE TITLE</div>
<div id="mobilebotao-x">✖</div>
<div id="mobilebotao">☰</div>

<div id="mobilemenu">

      - INÍCIO     </br>    
      - PORTIFÓLIO </br>
      - ORÇAMENTO  </br>
      - QUEM SOMOS

• CSS

html, body{
   margin:0px;
   width:100%;
}

#mobilecabecalho{
    height:72px;
    width:100%;
    background:#B6212D;
    position:fixed;
    z-index:-1;
    text-align:center;
    line-height:72px;
    color:#fff;
    font-family:times+new+roman;
    font-style: italic;
    font-weight: 100;
    letter-spacing:5px;
    font-size:42px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#mobilemenu {
    position:absolute;
    left:100px;
    background:#177F75;
    width:122px;    
    height:102px;
    top:72px;
    font-family:helvetica;
    line-height:25px;
    padding:10px;
    color:#fff;
    font-weight: bold;
    border-radius:0px 0px 10px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#mobilebotao{
    position:fixed;
    z-index:2;
    height:72px;
    width:72px;
    background:#B6212D;
    line-height:72px;
    color:#fff;
    font-weight: bold;
    font-family:helvetica;
    font-size:40px;
    text-align:center;
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#mobilebotao-x{
    position:fixed;
    z-index:3;
    height:72px;
    width:72px;
    background:#B6212D;
    line-height:72px;
    color:#fff;
    font-weight: bold;
    font-family:helvetica;
    font-size:40px;
    text-align:center;
    box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

• JS

$("#mobilemenu").css({"left": "-142px",opacity: 0.25})
$( "#mobilebotao-x" ).hide();

$("#mobilebotao").toggle(

    function () { 
        $("#mobilemenu").animate({"left": "0px",opacity: 1,}, 50); 
        $( "#mobilebotao-x" ).show();
    },

    function () { 
    }
);



$("#mobilebotao-x").toggle(

    function () { 
        $("#mobilemenu").animate({"left": "-142px",opacity: 1,}, 50); 
        $("#mobilebotao-x").hide();
    },

    function () { 
        $("#mobilemenu").animate({"left": "0px",opacity: 0.25}, 50);
    }
);

我知道也许还有另一种简单的方法可以完成我想做的事情，但是，这是 "almost" 我自己的代码，我想让它工作:)

Answer 1

你好现在习惯了这样的点击事件现在你点击你的菜单并显示，像这样动画你的代码。

$("#mobilemenu").css({"left": "-142px",opacity: 0.25})
$( "#mobilebotao-x" ).hide();



$('#mobilebotao').click(function(){
    $( "#mobilebotao-x" ).show();
    $( "#mobilebotao" ).hide();
    $('#mobilemenu').animate({"left": "+0px",opacity: 1}, 50);    
});

$('#mobilebotao-x').click(function(){
    $( "#mobilebotao" ).show();
    $( "#mobilebotao-x" ).hide();
    $('#mobilemenu').animate({"left": "-142",opacity: 0.25}, 50);    
});

现在我已经为您创建了一个演示，请查看此 click here

Js - 切换两个 div 和动画一个 div

Js - toggle two div and animate one div

html

javascript

toggle

jquery-animate