jQuery动画功能-隐藏和拉伸div [英] jQuery animate function - hide and stretch divs

问题描述

我有一个页面，divs为；

I have a page with divs as;

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

id switch is a trigger, which is meant to toggle animation. On 1st click, it should shrink the width of sidebar to 5px and width of list to 0px, and the margin-left of switch to 5px and the left of viewer to 5px. When user again click the trigger, everything may return to previous state and positions. In short i want to toggle hide/show sidebar. The animations should be some sliding effect towards left and then towards right.

您可以看看我在说什么> 此处 和更新的小提琴> 此处 .

You can have a look at what I am talking about here and an updated fiddle here.

推荐答案

根据更新后的代码，您在#switch的空白处设置了200px的空白；

Per your updated code, you are setting the "left" of the #switch when you gave it a margin of 200px;

更改

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

到

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

这篇关于jQuery动画功能-隐藏和拉伸div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！