Question

我遇到了一些麻烦;我希望这行文本在页面加载时自动淡入淡出。但是现在它没有做任何事情，有什么我想念的吗？

这是我的代码，我最近在查看以前与此主题类似的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>

Answer 1

我想你忘记在初始化结束时调用该方法。添加：

     fade($("#fade"));

Answer 2

您还可以使用fadeToggle（）来简化代码（除非您想使用自己的淡入淡出逻辑）。

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

假设你真的希望它像闪烁标签一样！： - ）

查看Fiddle

如何使用jQuery自动淡入淡出文本？

2 个答案: