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 的 margin-left 缩小到 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 时，您正在设置它的“left”；

改变、

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

至、

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