jQuery animate elements while animating element they are contained in
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 开发者_如何学Cyo work smiulatanously together
thanks for any help
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.
精彩评论