0

我有一个简单的问题要问你。为什么下面的代码无法正常工作 - 图像无法消失。怎么了？我必须在 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>

谢谢！

4

2 回答 2

0

首先，您忘记关闭会生成语法错误的 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

小提琴

也如评论所述，考虑将 jQuery 版本升级到更新的版本。jQuery 1.8.3 已经发布了。

还有一件事，您的评论说“淡入”，但您正在打电话fadeOut。如果要淡入display:none元素，请将fadeOut调用替换为fadeIn.

于 2012-12-01T20:27:23.957 回答
0

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

jsBin 演示

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)这个模数将帮助您一次淡化 5 x 5 图像。

于 2012-12-01T20:27:32.933 回答