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:

```
function changeBackground() {
var background = document.getElementById("background");
var h_background = document.getElementById("background_hidden")

$('#background').fadeOut('slow', function() {$('#background_hidden').fadeIn('slow')});
}

```

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.

Any ideas of what I might be doing wrong?

Added a jsfiddle, but it currently does not work - trying to figure out why.
<http://jsfiddle.net/qrCjA/8/>