文章/答案/技术大牛

发布

问FadeOut()函数
EN

Stack Overflow用户

提问于 2012-12-02 04:12:34

回答 2查看 260关注 0票数 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>

谢谢!

html

image

fadein

fadeout

jquery

回答 2

Stack Overflow用户

发布于 2012-12-02 04:27:24

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

票数 0

Stack Overflow用户

发布于 2012-12-02 04:27:33

我刚刚使用了最新的jQuery libray，清理了你的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)这个模将帮助你一次淡入淡出5*5的图像。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13663290

复制

相似问题

问FadeOut()函数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

jsBin demo

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FadeOut()函数EN

回答 2

Stack Overflow用户

Stack Overflow用户

jsBin demo

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FadeOut()函数
EN