Question

我有一个简单的问题要问你。为什么下面的代码无法正常工作 - 图像无法消失。怎么了？我必须在jQuery中使用fadeOut函数。也许是语法错误？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FadeOut - jQuery</title>

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<style type="text/css">
#outercorners img {
    display:yes;
}
</style>


<script type="text/javascript">

var x=1; // The corner counter

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

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

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

</script>



</head>

<body>

<button>Start!</button>

<div id="outercorners">

 <img id="corner1" src="images/mouse_1.jpg" width="200" height="150"/>
 <img id="corner2" src="images/mouse_2.jpg" width="200" height="150"/>
 <img id="corner3" src="images/mouse_3.jpg" width="200" height="150"/>
 <img id="corner4" src="images/mouse_4.jpg" width="200" height="150"/>


 <div id="corner5"><img src="images/mouse_5.jpg" width="200" height="150" />
  <img id="corner6" src="images/mouse_6.jpg" width="200" height="150"/>
 <img id="corner6" src="images/mouse_7.jpg" width="200" height="150"/>
 <img id="corner7" src="images/mouse_8.jpg" width="200" height="150"/>


 <div id="corner9"><img src="images/mouse_9.jpg" width="200" height="150" />
  <img id="corner10" src="images/mouse_10.jpg" width="200" height="150"/>
 <img id="corner11" src="images/mouse_11.jpg" width="200" height="150"/>
 <img id="corner12" src="images/mouse_12.jpg" width="200" height="150"/>

  <div id="corner13"><img src="images/mouse_13.jpg" width="200" height="150" />
  <img id="corner14" src="images/mouse_14.jpg" width="200" height="150"/>
 <img id="corner15" src="images/mouse_15.jpg" width="200" height="150"/>
 <img id="corner16" src="images/mouse_16.jpg" width="200" height="150"/>

 </div>





</div>

</body>
</html>

谢谢！

Answer 1

首先，您忘记关闭生成语法错误的DOM就绪处理程序。

您还应存储对间隔的引用，以将其传递给clearInterval。

你的增量逻辑也略有偏差。要在前4个角落淡出，那就是：

var x = 0,
    interval;

function fading() {
    $("#corner" + (++x)).fadeOut(2000); // Fade in the current corner
    if (x == 4) { // Last image to be faded in
        clearInterval(interval);
    }
}

$(document).ready(function() {
    $("button").click(function() {
        interval = setInterval(fading, 1000);
    });
}); //<-- you forgot to close DOM ready

Fiddle

另外，请注意，请考虑将jQuery版本升级到更新版本。 jQuery 1.8.3已经出来了。

还有一件事，你的评论会说“淡入”，但你打电话给fadeOut。如果您要淡化display:none元素，请将fadeOut来电替换为fadeIn。

Answer 2

我刚刚使用了最新的jQuery库，清理了你的HTML并修复了javascript：

jsBin demo

var x=1;  // The corner counter
var intv; 


function fading() {

  $("#corner"+(x++)).fadeOut(2000); // Fade in the current corner

  if (x%6===0) { // Last image to be faded in?
    clearInterval(intv); // Stop interval
  }

}

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

HTML：

<button>Start!</button>

<div id="outercorners">

 <img id="corner1" src="images/mouse_1.jpg" width="200" height="150" alt="1" />
 <img id="corner2" src="images/mouse_2.jpg" width="200" height="150" alt="2" />
 <img id="corner3" src="images/mouse_3.jpg" width="200" height="150" alt="3" />
 <img id="corner4" src="images/mouse_4.jpg" width="200" height="150" alt="4" />


 <img id="corner5" src="images/mouse_5.jpg" width="200" height="150" alt="5" />
 <img id="corner6" src="images/mouse_6.jpg" width="200" height="150" alt="6" />
 <img id="corner6" src="images/mouse_7.jpg" width="200" height="150" alt="7" />
 <img id="corner7" src="images/mouse_8.jpg" width="200" height="150" alt="8" />


 <img id="corner9"  src="images/mouse_9.jpg" width="200" height="150" alt="9" />
 <img id="corner10" src="images/mouse_10.jpg" width="200" height="150" alt="10" />
 <img id="corner11" src="images/mouse_11.jpg" width="200" height="150" alt="11" />
 <img id="corner12" src="images/mouse_12.jpg" width="200" height="150" alt="12" />

 <img id="corner13" src="images/mouse_13.jpg" width="200" height="150" alt="13" />
 <img id="corner14" src="images/mouse_14.jpg" width="200" height="150" alt="14" />
 <img id="corner15" src="images/mouse_15.jpg" width="200" height="150" alt="15" />
 <img id="corner16" src="images/mouse_16.jpg" width="200" height="150" alt="16" />

</div>

(x%6===0)此Modulo将帮助您一次淡化5 x图像。

FadeOut（）函数

2 个答案:

jsBin demo