2013-07-04 48 views
0

我有一些麻烦;我希望这行文本在页面加载时自动淡入淡出。但现在它没有做任何事情,有什么我失踪?你如何让文本自动淡入和淡出jQuery?

这是我的代码,我最近在看以前的类似于这个主题的stackoverflow的帖子,但我只是不能得到它的工作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>New Web Project</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
<script src="js/jquery-1.6.3.min.js"></script> 
<script src="fancybox/jquery.fancybox-1.3.4.js"></script> 
<script> 
    $(document).ready(function() 
    { 
    function fade(element) 
    { 
     var op = 1; 
     // initial opacity 
     var timer = setInterval(function() 
     { 
     if (op <= 0.1) 
     { 
      clearInterval(timer); 
      element.style.display = 'none'; 
     } 
     element.style.opacity = op; 
     element.style.filter = 'alpha(opacity=' + op * 100 + ")"; 
     op -= op * 0.1; 
     }, 50); 
    }//closes function 

    }); 
    //closes document.ready function 
</script> 
</head> 
<body> 
<div id="fade" style="background-color:#66FFFF;width:500px; 
height:100px;text-align:center;"> 
    <br /> 
    "This text should fade in and out" 
</div> 
<br /> 
<br /> 
</body> 

+0

如果你已经包括jQuery的,为什么不淡入/淡出方法使用它呢? –

回答

1

我想你忘了打电话给在初始化结束的方法。地址:

 fade($("#fade")); 
1

您也可以简化你的代码(除非你想使用自己的淡出逻辑)通过使用fadeToggle()。

$(document).ready(function(){ 
    setInterval(function(){ 
     $("#fade").fadeToggle(400); 
    }, 1500); 
}); 

假设你真的想表现得像一个闪烁的标签! :-)

退房Fiddle