使用Jquery動畫Divx一個接一個地右對齊

Question

我試着動畫多個div，淡入淡出，一個接一個地依次加載頁面。我也想反過來，按順序淡出，當我點擊去另一頁。我如何去設置這個在jQuery中？

Answer 1

一種很難給你一個例如，因爲在jQuery中有很多方法來動畫，但這裏有一個簡單的例子。動畫2個<div> S，一前一後（在頁面加載）：

看到這裏的工作例如：http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML：

<div id="animation-one">Hello!</div> 
<div id="animation-two">Jquery Animate!</div> 

CSS：

#animation-one, 
#animation-two 
{ 
    opacity:0; 
    top: 30px; 
    width: 400px; 
    height: 100px; 
    background-color:#00CCCC; 
    font-size:35pt; 
    position:absolute; 
} 

#animation-one 
{ 
    background-color:#CCCC33; 
    top:130px; 
} 

的JavaScript：

$("#animation-one").animate({ 
    opacity:1.0}, 700, 
    function() { 
     // Callback function: This is called when 'animation-one' 
     // is finished. 
     $("#animation-two").animate({ 
      opacity: 1.0 
     }, 700); 
    } 
); 

這裏發生的事情：

• 兩個<div> s爲在頁面上用CSS opacity: 0
• 當頁面加載時，<div> ID爲animation-one從透明度0爲期700毫秒的動畫到不透明1
• animation-one的動畫完成後，另一個<div>（ID爲animation-two）的動畫以類似的方式啓動。

---

現在，淡出<div> s是相似的。我假定你的鏈接只是引導到另一個頁面，所以直到動畫結束後我已經停用了該鏈接的下面：

這裏假設你有一個鏈接<a>與next-page的ID，但實際上它可以是任意選擇：

HTML：

<a id="next-page" href="http://www.google.com">Google</a> 

的JavaScript：

$("#next-page").click(function($event) { 
    $event.preventDefault(); 
    var href = $(this).attr("href"); 

    $("#animation-two").animate({ 
     opacity: 0}, 700, 
     function() { 
      // Callback function: This is called when 'animation-two' 
      // is finished. 
      $("#animation-one").animate({ 
       opacity: 0}, 700, 
       function() { 
        // Direct the user to the link's intended 
        // target. 
        window.location = href; 
       }); 
    }) 
}); 

這裏是什麼Happe的ning：

• 當點擊鏈接ID爲next-page時，會出現與上述相似的動畫序列，但相反。
• 最後一次動畫發生後，鏈接正常。

我認爲看到上面的鏈接的例子應該有所幫助。另外，請確保查看animate的文檔。

希望有幫助！

編輯：添加一個鏈接到另一個例子，因爲OP想立即動畫多個<div> s：http://jsfiddle.net/andrewwhitaker/n3GEB/。這將公共代碼移入函數中，並希望使示例更易於閱讀。

Answer 2

請注意，jQuery動畫函數將回調作爲最終參數。這個函數在動畫完成時被調用。您將在此回調中開始爲下一個DIV製作動畫。另一種選擇是fxQueues。

沒有一種完美的方式可以在離開頁面時反轉動畫。你可以做線沿線的東西也爲了您的網頁上的鏈接：

$("a").click(function() 
{ 
    var target = $(this).href; 
    // Do animation 
    // In the final completion callback, do 
    window.location.href = target; 
}); 

（注意：我不保證這個作品，它只是僞代碼）

Answer 3

我會看看使用回調和隊列。

看看這個：

jQuery queue events http://api.jquery.com/queue/

希望這是你的正確方向的一個點。