js动画在第一次点击时不起作用

Question

关于JavaScript，我是菜鸟。 我基本上编辑了一个代码，有人早些帮助了我。 它完全按照我想要的方式工作。 它只是没有动画的第一次点击。 但是在第一次单击后，它可以正常工作。

这是js代码：

$(function() {
"use strict";

var isOpen = true;

$('#box').on('click', function() {
if (isOpen) {
  animate(false);
    isOpen = false;
    } else {
    animate(true);
    isOpen = true;
    }
});
});

function animate(action) {
    if (action) {
    $('#left-div').animate({ left: '0' }, 600);
    $('#right-div').animate({ left:'30vw'}, 600);
        $('#close').hide();
    $('#open').show();
} else {
    $('#left-div').animate({ left: '0' }, 600);
        $('#right-div').animate({ left:'0' }, 600);
        $('#close').show();
    $('#open').hide();
}
}

这是演示

Answer 1

检查这个...

  $(function() { "use strict"; var isOpen = true; $('#box').on('click', function() { if (isOpen) { animate(false); isOpen = false; } else { animate(true); isOpen = true; } }); }); function animate(action) { if (action) { $('#left-div').animate({ width: '30vw' }, 600); $('#close').hide(); $('#open').show(); } else { $('#left-div').animate({ width: '0' }, 600); $('#close').show(); $('#open').hide(); } } 

 * { padding: 0; margin: 0; } #post-wrapper{ width: 100vw; } #post-wrapper > *{ display: inline-block; } #left-div { width: 30vw; height: 100vh; background: green; } #left-content{ color: white; padding: 5px 10px 0px 10px; width: 90vw; } #right-div{ display: inline-block; position: absolute; top: 0vw; width: 100vw; height: 100vh; background: navy; } #right-content { color: white; margin: 5px 0px 0px 50px; } #close{ text-align: center; position: absolute; width: 20px; height: 20px; margin-top: 5px; margin-left: 10px; background: red; cursor: pointer; } #open { text-align: center; position: absolute; width: 20px; height: 20px; margin-top: 5px; margin-left: 10px; background: red; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="post-wrapper"> <div id="left-div"> <div id="left-content"> <p>Text</p> </div> </div> <div id="right-div"> <div id="box"> <div id="close">+</div> <div id="open">X</div> </div> <div id="right-content"> <p>More text </p> </div> </div> </div>