jQuery动画功能-隐藏和拉伸div

Question

我有一个页面，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是一个触发器，用于切换动画。 第一次单击时，应将sidebar的宽度缩小到5px， list的宽度缩小到0px， switch的左边距缩小到5px， viewer的左边缩小到5px。 当用户再次单击触发器时，一切都可能返回到先前的状态和位置。 简而言之，我想切换隐藏/显示侧边栏。 动画应具有向左滑动然后向右滑动的效果。

您可以在这里查看我在说什么，并在此处查看最新的小提琴。

Answer 1

您的代码运行良好，只是您的CSS需要微调。

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

在此处查看代码： http : //jsfiddle.net/EzAV2/8/

Answer 2

根据您更新的代码，当您将#switch的边距设置为200px时，您将其设置为“左”；

更改，

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

至，

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