動畫和加載

Question

您好我做出這樣的代碼：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#navigation a:first-child').click(function(){ 
    $("#space").load("index.html #container").animate({ 
     top: '-=120' 
     }, 1000, function() { 
     // Animation complete. 
     }); 
}); 

$('#navigation a:nth-child(2)').click(function(){ 
    $("#space2").load("index.html #container2").animate({ 
      bottom: '-=120' 
     }, 1000, function() { 
     // Animation complete. 
     }); 
});   
}); 
</script> 
<div id="navigation"> 
    <a href="#">home</a> 
    <a href="#">test</a> 
</div> 

<div id="space" style="border: 1px solid #000000;"> 

</div> 

<div id="space2" style="border: 1px solid #ff0000;"> 

</div> 

我希望它動畫上的鏈接的點擊，但左一動畫和淡入，第二個鏈接從動畫頂部和淡入，第三個從右邊開始動畫並淡入，第四個從底部開始動畫並淡入，每個我需要控制速度，因此第一個速度將爲500，第二個爲一千，第三，1200，第四1500.

如果可能我想他們都加載到同一地區。我不知道這是可以做到

感謝

Answer 1

看起來你擁有了一切正確的，你也許會想你的動畫移動到.load回調使動畫不火，直到元素之後被加載。像這樣：

$("#space").load("index.html #myDiv", function(){ 
    $(this).animate({ 
     top: '-=120' 
      }, 1000, function() { 
      // Animation complete. 
      }); 
    }); 

當然你可以控制速度和動畫互相獨立沒有問題。只需將「1000」更改爲「500」或「1200」或任何你想要的。另外，我猜測你會希望將「空間」元素放在一個絕對位置開始（如可能離開頁面），給它們一個寬度和高度，動畫將更加明顯。