随着时间的推移，尝试使用 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/

祝你好运

Answer 2

从您的持续时间中删除报价或使用预设“慢”或“快”等之一

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

或

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

不是

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

Answer 3

如果您有很多图像，那么您可能希望使用定时功能将它们淡入：

var x=0; // The corner counter

function fading() {
  $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner

  if (x==4) { // Last image to be faded in?
    clearInterval(); // Stop interval
  }
}

$(document).ready(function(){
  setInterval("fading()",1000); // Call function every second
});

Answer 4

您可能需要将图像包装在 <div> 中并淡化它们。喜欢：

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

数字周围的引号不应该有所作为。 JS 将在预期数字的上下文中将“2000”隐式更改为 2000（使用 + 时除外，它将连接字符串）。