Question: Im creating a nav that uses jquery to replace the image on rollover. Here is the code I am using:

<http://peps.ca/blog/easy-image-rollover-script-with-jquery/>

basically, you add a suffix (\_o) to the filename and when you rollover the src, jquery replaces it with the (\_o).png. I want to add fade so when there is a rollover, the transition isn't instant, rather there is a quick, elegant fade. Any ideas?

Answer: 
```
$('#the_image).hover(function() {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn(); 
   });
}, function {
   $(this).fadeOut(function() {
     $(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn(); 
   });
});

```
You could layer a second (hidden) element over the top of your default image, then see about fading that one in and out with a rollover.