jQuery圖像淡入序列？

Question

我有一個關於jQuery和圖像淡化的問題。我有一堆圖像，並且我希望在加載頁面時逐漸淡化每個圖像以完全不透明。我的html代碼如下：

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title</h2> 
    <p>Caption</p></div> 
</div> 

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title 2</h2> 
    <p>Caption 2</p></div> 
</div> 

每個圖像都有自己對應的標題和標題，它們一個在另一個之下顯示。我想先讓第一個圖像淡入，然後讓每個後面的圖像淡入。任何人有想法？我對jQuery有一個非常基本的理解。謝謝

Answer 1

這可能不是你需要實現自己，檢查出jQuery Cycle Plugin。

Answer 2

你需要排隊的動畫，然後開始每次當以前的兩端：

<img src="..." /> 
<img src="..." /> 
<img src="..." /> 
<img src="..." /> 

var animations = new Array(); 
// queue all 
$("img").each(function() { 
    animations.push($(this)); 
}); 

// start animating 
doAnimation(animations.shift()); 

function doAnimation(image) { 
    image.fadeIn("slow", function() { 
     // wait until animation is done and recurse if there are more animations 
     if(animations.length > 0) doAnimation(animations.shift()); 
    }); 
} 

Answer 3

您還可以通過延遲效應對於每個後續圖像，像這樣（注意掉色他們按順序：我使用window.load，以確保所有的圖像啓動動畫之前被加載）米：

$(window).load(function() { 

     var delay = 0; 

     $('img').each(function() { 
      $(this).delay(delay).fadeIn(); 
      delay += 150; 
     }); 

    }); 

這非常適合重疊的動畫，而不是等待直到每一個完成。它也可以這樣隨機化：

$(window).load(function() { 

     var delay = 0; 

     $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() { 
      $(this).delay(delay).fadeIn(600); 
      delay += 150; 
     }); 

    });