3

我试图弄清楚如何在页面加载时使 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() 函数吗？如果是这样，在这种情况下我将如何实现它？

感谢您提供任何帮助。

4

4 回答 4

8

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

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

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

演示：

http://jsfiddle.net/e5H5Y/

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

祝你好运

于 2011-01-23T04:48:29.943 回答
2

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

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

或者

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

不是

$("#corner1").fadeIn("2000", function(){...
于 2010-06-15T20:55:20.793 回答
1

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

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
});
于 2010-06-15T21:45:23.027 回答
0

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

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

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

于 2010-06-15T21:06:21.997 回答