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

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

这是

检查一下

$（函数（）{
“严格使用”；
var-isOpen=真；
$（“#框”）。在（'click'，function（）上{
if（等参线）{
动画（假）；
isOpen=假；
}否则{
动画（真实）；
isOpen=真；
}
});
});
函数动画（动作）{
如果（行动）{
$（'#left div'）。动画（{width:'30vw'}，600）；
$（“#关闭”）.hide（）；
$（“#打开”）.show（）；
}否则{
$（'#left div'）。设置动画（{width:'0'}，600）；
$（“#关闭”）.show（）；
$（“#打开”）.hide（）；
}
}

*{
填充：0；
保证金：0；
}
#邮政包装{
宽度：100vw；
}
#邮政包装>*{
显示：内联块；
}
#左div{
宽度：30vw；
高度：100vh；
背景：绿色；
}
#左内容{
颜色：白色；
填充：5px 10px 0px 10px；
宽度：90vw；
}
#右分区{
显示：内联块；
位置：绝对位置；
top:0vw；
宽度：100vw；
高度：100vh；
背景：海军；
}
#正确内容{
颜色：白色；
保证金：5px0px 0px 50px；
}
#接近{
文本对齐：居中；
位置：绝对位置；
宽度：20px；
高度：20px；
边缘顶部：5px；
左边距：10px；
背景：红色；
光标：指针；
}
#打开{
文本对齐：居中；
位置：绝对位置；
宽度：20px；
高度：20px；
边缘顶部：5px；
左边距：10px；
背景：红色；
光标：指针；
}

正文

+
X
更多文本

正确设置右div的初始左位置：

右div{[…]左：30vw；}

您的小提琴似乎工作正常（FF43），蓝色div在第一次单击时就调整到左。它不应该动画而不是向左捕捉吗？感谢Oliver，似乎完成了这个技巧，只需动画一个div。在此

$（'#left div'）

根据打开或关闭状态设置动画。