title: jQuery fadeIn not working on IE9
body: <p>Weird problem this.  I've got a web page that fades images in and out on a timer, using jQuery's fadeIn() and fadeOut() methods.  It worked fine in Firefox and Chrome, but not in IE9 - only the first image ever showed.  After a lot of removing CSS, HTML, etc, to whittle down the reason, I managed to get it working in IE9 <em>but only if I remove the first line of my HTML file</em>:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>With that line present, fadeIn() fails.  Without that line, fadeIn() works.  fadeOut() appears to work regardless.</p>
  
  <p>I'm using the latest stable build of jQuery (downloaded yesterday).</p>
  
  <p>This is the HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;script src="scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="scripts/imageswitch.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="myGallery"&gt;
              &lt;img src="/images/Img1.jpg" id="firstimg" class="active ready" onload="setInterval( 'swapImages()', 3000 );" /&gt;
              &lt;img src="/images/Img2.jpg" onload="SetImgReady(this);" /&gt;
              &lt;img src="/images/Img3.jpg" onload="SetImgReady(this);" /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the contents of "imageswitch.js": (I use the SetImgReady() function to add the 'ready' class to each image once it's finished downloading, so it only ever rotates between fully loaded images)</p>
  
  <pre><code>function swapImages() {
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length &gt; 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
  
      while ($next &amp;&amp; !$next.hasClass('ready')) {
          if ($next.next().length &gt; 0)
              $next = $next.next();
          else
              $next = false;
      }
  
      if ($next &amp;&amp; $active) {
          $next.fadeIn( 2000 ).addClass('active');
          $active.fadeOut( 2000 ).removeClass('active');
      }
  }
  
  function SetImgReady( $ImgObj ) {
      if ($ImgObj)
          $ImgObj.className += "ready";
  }
  </code></pre>
  
  <p>And this is the CSS:</p>
  
  <pre><code>#myGallery{
      position:relative;
      width:400px;
      height:300px;
  }
  #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
      border: 1px solid black;
  }
  #myGallery img.active{
      display:block;
  }
  </code></pre>
  
  <p>So... is the  declaration making IE9 go overly-standards-compliant and decide that fading isn't allowed under XHTML1.0 or something?</p>
  
  <p>Another odd thing that also happens, once the fading is working: On only the first image switch, the displayed image dissapears immediately instead of fading out.  All other images nicely fade in/out as required.  Any thoughts on that too?</p>
  
  <p>Thanks all.</p>