jQuery animer des éléments tout en animant l'élément ils sont contenus dans

Question

j'ai div qui contient 2 autres divs, tandis que je fond dans div externe sur la charge de la page je voudrais animer la première div intérieure à glisser dans la droite et la seconde div intérieure à glisser à gauche, je sais comment faire ces choses séparément, mais je ne sais pas comment mettre ces choses yo travail smiulatanously ensemble

Merci pour toute aide

Answer 1

EDIT:

le code 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> 

J'ai utilisé une représentation à l'écran simple, où div wrapper # est juste une boîte avec une largeur et la hauteur spécifiées, trop-plein de caché (donc les éléments animés ne le font pas être montré, quand ils sont hors des limites) et deux divs, avec les identifiants de #left et #right, chacun a la position absolue, la largeur 50%, #left est déplacé -50% à gauche et #right est déplacé -50% à droite;

première révision considérant JS/jQuery:

l'astuce est de ne pas utiliser Enchaînement, mais pour écrire le code indépendamment des autres animations (par exemple ne pas utiliser la fonction de rappel anonyme - 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> 

les scripts d'animation gauche et droite ont pris à partir de: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

en ce qui concerne.