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)); 
}; 

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