Question

我有一个div为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

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

变化，

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

要，

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

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

2 个答案: