jQuery動畫元素動畫元素它們包含在

Question

我得到包含2個其他div的div，而我在頁面加載時淡入外部div我想要動畫第一個內部div在右側和第二個內部div滑動在左，我知道如何單獨做這些事情，但我不知道如何把這些東西喲工作smiulatanously一起

感謝您的幫助

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＃包裝僅僅是一個具有指定寬度和高度，溢出設置爲隱藏（所以動畫元素不框當它們超出邊界時顯示）和兩個div，其中#left和#right具有絕對位置，寬度50％，＃leftft向左移動-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

關於。