title: Fade one image into another
body: <p>This should be a simple question.  When I press a button, I'd like to fade out one image and fade in a new one.  I have a button binded to this function:</p>
  
  <pre><code>function changeBackground() {
  var background = document.getElementById("background");
  var h_background = document.getElementById("background_hidden")
  
  $('#background').fadeOut('slow', function() {$('#background_hidden').fadeIn('slow')});
  }
  </code></pre>
  
  <p>In the CSS, h_background has a display: none; attribute.  With this function as it is, the current image will fade out and the other one will display but it does not fade in - it shows up suddenly.</p>
  
  <p>Any ideas of what I might be doing wrong?</p>
  
  <p>Added a jsfiddle, but it currently does not work - trying to figure out why.
  <a href="http://jsfiddle.net/qrCjA/8/" rel="nofollow noreferrer">http://jsfiddle.net/qrCjA/8/</a></p>