Jquery slide left to right makes div jump up on slide

html, javascript, jquery

Solution

Use absolute positioning inside a relative-positioned wrapper.

Fiddle exemple (updated)

HTML

<div id="wrapper">
    <div class="slidingDiv" id="box1">...</div>
    <div class="slidingDiv" id="box2" style="display:none">...</div>
</div>

CSS

#wrapper {
    position:relative;
}

#wrapper div {
    position:absolute;
    top:0;
}

Javascript auto-height calculation

var maxHeight = 0;
$('.slidingDiv').each(function() {
    if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('#wrapper').height(maxHeight);

Problem

I'm trying to create an effect where when a link is clicked it makes the initial div slide to left and reveal the second div sliding to the left and when a link is clicked from the second div the div slides to the right with the first div sliding right as well. Here is my code so far HTML ``` <div id="box1"> <a href="#" id="click1">Click to show other div</a> <br> Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere. </div> <div id="box2" style="display:none"> <a href="#" id="click2">Click to show other div</a> <br> Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere. </div> ``` JS ``` $(document).ready(function () { $('#click1').click(function () { $('#box1').hide("slide", { direction: "left" }, 1000); $('#box2').show("slide", { direction: "right" }, 1000); }); $('#click2').click(function () { $('#box2').hide("slide", { direction: "right" }, 1000); $('#box1').show("slide", { direction: "left" }, 1000); }); }); ``` Here is the JSFiddle Link with what I have so far http://jsfiddle.net/rayshinn/abNmN/4/ The issue is that when I click the link and invoke the slide animation the second hidden div jumps into place. Is there a way I can create a smooth animation from left to right without the div poping/jumping effect? Thank you for your help.

Original source