jQuery的循環不透明淡入圖像

Question

我有我的網頁上三幅圖像：

<div class="imagesmall fader1 opacity1"><img src="/images/mercedes.png" /></div> 
<div class="imagesmall2 fader2 opacity1" style="margin-left:5px;"><img src="/images/house.png" /></div> 
<div class="imagesmall2 fader3 opacity1" style="margin-left:5px;"><img src="/images/polo.png" /></div> 

類opacity1的給了他們所有的使用CSS 0.6透明度。

我如何使用jquery創建一個腳本，將它們分別設置爲不透明度1.0，然後返回到不透明度0.6，然後按順時針方向進行操作，並在它們之間有一個延遲？

Answer 1

您可以使用fadeTo()和delay()：

$(document).ready(function() { 
    performEffect($("div.opacity1:first"), 1000); 

    function performEffect($div, delay) 
    { 
     $div.fadeTo("slow", 1).fadeTo("slow", 0.6, function() { 
      var $next = $div.nextAll("div.opacity1"); 
      if (!$next.length) { 
       $next = $("div.opacity1"); 
      } 
      performEffect($next.first().delay(delay), delay); 
     }); 
    } 
}); 

您可以測試執行here。

Answer 2

像這樣：

var TimeOut = 4; 
$('.opacity1').each(function() { 
    setTimeout(function(ele) { 
     ele.animate({opacity: 1}, 5000, function() { ele.animate({opacity: 0.6}); } 
    }, 1000 * timeOut++, $(this)); 
}; 

我使用的代碼本，例如到淡出一些消息框，一個接一個。