jQuery动画元素，同时包含动画元素

Question

我得到了包含2个其他div的div，而我在页面加载时淡入外部div我希望动画第一个内部div在右边滑动，第二个内部div在左边滑动，我知道这些东西是如何分开的但我不知道如何把这些东西放在一起工作

感谢您的帮助

Answer 1

修改

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>

我使用了一个简单的屏幕表示，其中div＃wrapper只是一个具有指定宽度和高度的框，溢出设置为隐藏（因此动画元素不会显示，当它们超出边界时）和两个div，使用#left和#right的ID，每个都有绝对位置，宽度为50％，＃left向左移动-50％，＃right向右移动-50％;

考虑JS / jQuery的第一次修订：

诀窍不是使用链接，而是独立于其他动画编写代码（例如，不使用匿名回调 - 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>

左右动画脚本取自：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

问候。