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

Question

我有一个带有 div 的页面；

<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。当用户再次点击触发器时，一切都可能返回到之前的状态和位置。简而言之，我想切换隐藏/显示侧边栏。动画应该是向左然后向右滑动的效果。

你可以看看我在说什么here 和更新的小提琴here。

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