尝试使用JQuery随着时间的推移逐步淡化div

Question

我试图找出如何在页面加载时使4个图像按顺序淡入淡出.

以下是我的(业余)代码:

这是HTML:

<div id="outercorners">

 <img id="corner1" src="images/corner1.gif" width="6" height="6" alt=""/>
 <img id="corner2" src="images/corner2.gif" width="6" height="6" alt=""/>
 <img id="corner3" src="images/corner3.gif" width="6" height="6" alt=""/>
 <img id="corner4" src="images/corner4.gif" width="6" height="6" alt=""/> 

</div><!-- end #outercorners-->

这是JQuery:

$(document).ready(function() {

$("#corner1").fadeIn("2000", function(){

$("#corner3").fadeIn("4000", function(){

  $("#corner2").fadeIn("6000", function(){

    $("#corner4").fadeIn("8000", function(){


    });

   });

 });

 });

这是css:

#outercorners {
position: fixed;
top:186px;
left:186px;
width:558px;
height:372px;
}

#corner1 {
position: fixed;
top:186px;
left:186px;
display: none;
}

#corner2 {
position: fixed;
top:186px;
left:744px;
display: none;
}

#corner3 {
position: fixed;
top:558px;
left:744px;
display: none;
}

#corner4 {
position: fixed;
top:558px;
left:186px;
display: none;
}

他们似乎只是对我眨眼,而不是按照我归于他们的顺序淡入淡出.我应该使用queue()函数吗？如果是这样,我将如何在这种情况下实施它？

谢谢你的帮助.

Answer 1

我知道这是几个月前的问题,但我只是想发布一个可能对某人有帮助的解决方案.我会做这样的事情:

var d= 0;
$('#outercorners > img').each(function() {
    $(this).delay(d).fadeIn(1000);
    d += 1000;
});

您可以将1000毫秒更改为任何数字以满足您的需要.请注意,它们不必相等.

演示:

http://jsfiddle.net/e5H5Y/

http://jsfiddle.net/e5H5Y/2/

祝好运