BaconJuice BaconJuice - 1 month ago 12
HTML Question

Jquery slide left to right makes div jump up on slide

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.

Answer

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);
Comments