Question

I have a horizontally centered div #box1 that has margin: 5px auto that has to slide to the left and off the screen, while #box2 slides into the screen from the right, when the button .class is clicked on. I’ve seen how its done for absolutely positioned divs, now how do you do it if its not?

HTML Structure

<div class="button"><a href="#">Slide</a> </div>

<div id="container">

    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>

</div>

Failed attempt

$(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({
            left: '150%',
        }, 'slow' );

});

Answer 1

Is this the effect you’re looking for: jsFiddle example.

jQuery:

$(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({ left: '-500px' }, 'slow');
    $("#box2").animate({ left: '0px' }, 'slow');
});​

CSS:

#box1, #box2 {
    margin: 5px auto;   
    border: 1px solid #999;
    position:relative;
}
#box2 {
   left:500px;   
}
#container {
    overflow:hidden;
}

​
HTML:

<div class="button"><a href="#">Slide</a> </div>
<div id="container">
    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>
</div>​