Question

我根本无法让这些图像淡入，我不知道我做错了什么。我放了alert("hi")而不是$(this).fadeIn()，然后会显示弹出窗口。我已经尝试将代码放在最后，我已尝试链接到本地jQuery脚本，我已经尝试在$("#eTR1").fadeIN()内执行$(document).ready()，但这也不起作用：< / p>

<!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);
}

我做错了什么？

Answer 1

不要在css中设置不透明度。给它一个display: none;

http://jsfiddle.net/rlemon/zSzva/

我还为你的fadeIn添加了1000毫秒的持续时间，以便你可以看到示例中的效果。

Answer 2

.fadeIn()适用于display: none;，您应该在CSS中设置，而不是opacity: 0。

无法让jQuery淡出我的图片？

2 个答案: