CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-animate
Alfred
Alfred

Reputation: 21406

jQuery animate function - hide and stretch 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 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.

Upvotes: 0

Views: 3365

Answers (2)

nolabel
nolabel

Reputation: 1157

Your code works fine, it is just your css that needs the fine tuning.

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

See the codes here: http://jsfiddle.net/EzAV2/8/

Upvotes: 3

Andrew
Andrew

Reputation: 13853

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

change,

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

to,

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

Upvotes: 0

Related Questions