Can't get jQuery to fadeIn my images?
<p>I can't get these images to fade in at all, and I don't know what I'm doing wrong. I have put <code>alert("hi")</code> instead of <code>$(this).fadeIn()</code> 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 <code>$("#eTR1").fadeIN()</code> inside the <code>$(document).ready()</code> but that also doesn't work:</p>

<pre><code>&lt;!doctype HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(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(); });
        });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;aside id="eTRRibbons"&gt;
      &lt;img id="eTR1" src="res/tr1.png"&gt;
      &lt;img id="eTR2" src="res/tr2.png"&gt;
      &lt;img id="eTR3" src="res/tr3.png"&gt;
    &lt;/aside&gt;
    &lt;aside id="eBLRibbons"&gt;
      &lt;img id="eBL1" src="res/bl1.png"&gt;
      &lt;img id="eBL2" src="res/bl2.png"&gt;
      &lt;img id="eBL3" src="res/bl3.png"&gt;
    &lt;/aside&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and</p>

<pre><code>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);
}
</code></pre>

<p>What am I doing wrong?</p>
