CODEWITHSUNDEEP
jqueryslide
Philip Fourie
Philip Fourie

Reputation: 116837

JQuery slide subsequent elements together with current element

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; }

Upvotes: 0

Views: 320

Answers (1)

TimCodes.NET
TimCodes.NET

Reputation: 4699

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

In principal, use animate.

Upvotes: 1

Related Questions