Question

How do I achieve the following slide left effect with JQuery?

1. I have a couple of div elements floating left to each other.
2. I would like to apply a slide left action on the first element (most left element).
3. The remaining elements should slide together and not JUMP after the animation has completed. (the jump is my problem)

I can get it work with toggle and sliding up but I need it to slide left and not up/down.

Here is a jsFiddle.

JavaScript:

$('button').click(function() {
    $('#page1').hide('slide', {direction: 'left'}, 1000);
});

HTML

<button>Slide left</button>

<div class='container'>
    <div id='page1'>
        Content 123
    </div>

    <div id='page2'>
        Content 456
    </div>    
</div>

CSS

.container div { float:left; }

Answer 1

$('#page1').animate({'margin-left': '-100px'}, 1000, 
    function() {$(this).hide();}
);

In principal, use animate.