title: image transition with javascript
body: <p>Can anyone suggest a lightweight fading image transition for javascript or jquery.  I'm thinking something along the lines of this:</p>
  
  <pre><code>document.getElementById("foo").src="images/robin.jpg";
  </code></pre>
  
  <p>where the html looks like this:</p>
  
  <pre><code>&lt;img id="foo" src="images/batman.png"/&gt;
  </code></pre>
  
  <p>The problem here is that the image doesn't fade, rather changes immediately.  I can certainly stack and animate two images independently, but I'm trying to replace one image.  Just makes for tidier code.  Any advice is much appreciated.  Thanks!</p>