jQuery animate elements while animating element they are contained in

Question

i got div which contain 2 other divs, while i fade in outer div on page load i'd like to animate first inner div to slide in right and second inner div to slide in left, i know how do these things separately but i don't know how to put these things yo work smiulatanously together

thanks for any help

Answer 1

EDIT:

the html:

<div id="wrapper">
    <div id="left">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div id="right">
      <p>Suspendisse nunc lorem, malesuada sit amet hendrerit at, vulputate non quam. </p>
    </div>
</div>

css:

<style type="text/css" media="all">
    #wrapper{
        position: relative;
     width: 500px;
  height: 500px;
  overflow: hidden;
  display: none;
  background: silver;
 }
 #left, #right{
  position: absolute;
  width: 50%;
  height: 100%;
 }
 #left{
  background: yellow;
  left: -50%;
 }
 #right{
  background: red;
  right: -50%;
 }
</style>

I used a simple screen representation, where div#wrapper is just a box with specified width and height, overflow set to hidden (so the animated elements don't get shown, when they are out of boundaries) and two divs, with ids of #left and #right, each has absolute position, width 50%, #left is moved -50% to the left and #right is moved -50% to the right;

first revision considering JS/jQuery:

the trick is not to use chaining, but to write the code independently of other animations (e.g. not using the anonymous callback - onAnimationEnd)

<script type="text/javascript">
$(function(){
    var animTime = 2000;
    $("#wrapper").fadeIn(animTime);
    var $lefty = $("#left");
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
     -$lefty.outerWidth() : 0
    }, animTime);
    var $righty = $("#right");
    $righty.animate({
      right: parseInt($righty.css('right'),10) == 0 ?
     -$righty.outerWidth() : 0
    }, animTime); 
});    
</script>

the left and right animation scripts took from: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

regards.