logo标签列表

无法使用jQuery实现图片的淡入效果？

javascriptjquery
3

我无法让这些图片实现淡入效果，也不知道哪里出了问题。我已经将$(this).fadeIn()替换为alert("hi")，弹出窗口显示了。我尝试将代码放在最后，尝试链接到本地jQuery脚本，还尝试在$(document).ready()中使用$("#eTR1").fadeIN()，但这些方法都没有奏效：

<!doctype HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
      $(document).ready(function()
        {
          $("#eTR1").bind("load", function() { $(this).fadeIn(); });
          $("#eTR2").bind("load", function() { $(this).fadeIn(); });
          $("#eTR3").bind("load", function() { $(this).fadeIn(); });
          $("#eBL1").bind("load", function() { $(this).fadeIn(); });
          $("#eBL2").bind("load", function() { $(this).fadeIn(); });
          $("#eBL3").bind("load", function() { $(this).fadeIn(); });
        });
    </script>
  </head>
  <body>
    <aside id="eTRRibbons">
      <img id="eTR1" src="res/tr1.png">
      <img id="eTR2" src="res/tr2.png">
      <img id="eTR3" src="res/tr3.png">
    </aside>
    <aside id="eBLRibbons">
      <img id="eBL1" src="res/bl1.png">
      <img id="eBL2" src="res/bl2.png">
      <img id="eBL3" src="res/bl3.png">
    </aside>
  </body>
</html>

并且

html
{
  height: 100%;
}

body
{
  min-height: 100%;
  margin: 0px;
}

#eTR1,#eTR2,#eTR3
{
  position: fixed;

  top:   0px;
  right: 0px;

  opacity: 0.0;
  filter: alpha(opacity = 0);
}

#eBL1,#eBL2,#eBL3
{
  position: fixed;

  bottom: 0px;
  left:   0px;

  opacity: 0.0;
  filter: alpha(opacity = 0);
}

我做错了什么？

fadeIn() 与 display: none; 配合使用，您应该将其设置为 display: none; 而不是不需要的 opacity: 0。 - Madara's Ghost
1
正如其他人所指出的，这是由CSS引起的问题。另一个证明是：当使用"display: none;"时它可以正常工作：http://jsfiddle.net/majidf/Fr2C5/ - Majid Fouladpour
2个回答
3
不要在css中设置透明度，将其设置为display: none; 我还给你的fadeIn添加了1000ms的持续时间，这样你可以在示例中看到效果。 http://jsfiddle.net/rlemon/zSzva/
3
.fadeIn()函数与display: none;一起使用，应该在CSS中设置，而不是使用不必要的opacity: 0。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接