Javascript jQuery动画函数-隐藏和拉伸div

我有一个divs为的页面

<div id="container">
    <div id="header"></div>
    <div id="sidebar">
        <div id="switch"></div>
        <div id="list"></div>
    </div>
    <div id="viewer"></div>
    <div id="footer"></div>
</div>

id

switch

是一个触发器，用于切换动画。第一次单击时，它应该将

侧栏的宽度缩小到5px，
列表的宽度缩小到0px，
开关的左边距缩小到5px，
查看器的左边距缩小到5px。当用户再次单击触发器时，一切都可能返回到以前的状态和位置。简而言之，我想切换隐藏/显示侧边栏。动画应该是向左然后向右滑动的效果

你可以看看我说的内容和一个更新的提琴。
你的代码运行得很好，只是你的css需要微调

#switch {
    height: 35px;
    width: 35px;
    left: 200px;
    background-color: #CC0066;
    cursor: pointer;
    position: relative;
}

请参见此处的代码：
您的代码运行良好，只是您的css需要微调

#switch {
    height: 35px;
    width: 35px;
    left: 200px;
    background-color: #CC0066;
    cursor: pointer;
    position: relative;
}

请参见此处的代码：
根据您更新的代码，当您将#开关的“左”设置为200px时

变,

$('#switch').animate({"left": 5});
$('#switch').animate({"left": 200});

对,

根据您更新的代码，当您将#开关的边距设置为200px时，您正在设置该开关的“左”

变,

$('#switch').animate({"left": 5});
$('#switch').animate({"left": 200});

对,

在JSFIDLE代码中，只移动
#查看器
。为什么？如果要移动4件事，请执行4个动画<代码>$（“#查看器”）.animate（{left:0}）$（“#边栏”）。动画（{“宽度”：5}）嗨@SPL\u Splinter，我做了一些修正，做了一把新小提琴。。但是div
switch
有一个bug。。在JSFIDLE代码中查看@，您只需移动
#查看器
。为什么？如果要移动4件事，请执行4个动画<代码>$（“#查看器”）.animate（{left:0}）$（“#边栏”）。动画（{“宽度”：5}）嗨@SPL\u Splinter，我做了一些修正，做了一把新小提琴。。但是div
switch
有一个bug。。查看@
位置：相对是一个很好的触摸是的，我知道了。但开关在动画开始时消失，并在动画结束时重新出现。为什么会发生这种情况？？？
位置：相对是一个很好的触摸是的，我知道了。但开关在动画开始时消失，并在动画结束时重新出现。为什么会发生这种情况？我在这里更新了小提琴，但开关在动画开始时消失，在动画结束时重新出现。修复了吗？？？@blasteralfred忽略侧栏，我删除了它的样式和动画。这就是你的意思吗？是的，我是认真的，伙计。。谢谢：）我在这里更新了小提琴，但开关在动画开始时消失，在动画结束时重新出现。修复了吗？？？@blasteralfred忽略侧栏，我删除了它的样式和动画。这就是你的意思吗？是的，我是认真的，伙计。。谢谢：）