javascript - Jquery slide left to right makes div jump up on slide -


i'm trying create effect when link clicked makes initial div slide left , reveal second div sliding left , when link clicked second div div slides right first div sliding right well.

here code far

html

<div id="box1">     <a href="#" id="click1">click 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 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 jsfiddle link have far http://jsfiddle.net/rayshinn/abnmn/4/

the issue when click link , invoke slide animation second hidden div jumps place. there way can create smooth animation left right without div poping/jumping effect?

thank help.

use absolute positioning inside 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); 

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -