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();
}
}

这是Demo

Answer 1

检查一下......

＆＃13;

＆＃13;

-1

＆＃13;

	$(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();
  	}
	}

＆＃13;

* {
  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;
}

＆＃13;

＆＃13;

＆＃13;