Can't get jQuery to fadeIn my images?_问答_开发者

开发者 https://www.devze.com 2023-03-31 17:27 出处：网络

I can\'t get these images to fade in at all, and I don\'t know what I\'m doing wrong. I have put alert(\"hi\") instead of $(this).fadeIn() and the popup is shown. I\'ve tried putting the code at the e

I can't get these images to fade in at all, and I don't know what I'm doing wrong. I have put alert("hi") instead of $(this).fadeIn() and the popup is shown. I've tried putting the code at the end, I've tried linking to a a local jQuery script, I've tried just doing the $("#eTR1").fadeIN() inside the $(document).ready() but that also doesn't work:

<!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>

and

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

What am I doing wrong?

don't set the opacity in the css. give it a display: none;

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

I have also added a 1000ms duration to your fadeIn so you can see the effect in the example.

The .fadeIn() works with display: none; you should set that in your CSS and not opacity: 0 which isn't needed.