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

问候。