Fade out/in animation?

I've a logo which is a two image sprite. When you hove开发者_StackOverflowr over it, the background position simple shifts to the bottom showing the new image.

I want to add a bit of a fade transition to it if possible, can anyone tell me the best way for this.

If it helps this is my CSS:

#header h1#logo a {
    background: url(../images/logo.jpg);
    background-position: 0 0;
    width: 74px;
    height: 74px;
    display: block;
    text-indent: -30000px;
}

#header h1#logo a:hover { background-position: 0 -85px;} 

Thanks

A more elegant way of doing this would be using two nested elements and the .hover() function:

HTML

<a class="logo">
    <div class="logo inner" style="display: none;"></div>
</a>

CSS

.logo {
    background: url(../images/logo.jpg);
    background-position: 0 0;
    width: 74px;
    height: 74px;
    display: block;
    text-indent: -30000px;
}

.inner { 
    background-position: 0 -85px !important;
}

jQuery

$("a.logo").hover(function() {
    $(".inner").fadeIn('slow');
}, function() {
    $(".inner").fadeOut('slow');
});

Hope this helps !

<script>
$(function() {
 $("#ui").hide();
 $("#jq").mouseover(function() {
  $(this).hide();
  $("#ui").fadeIn();
 });
 $("#ui").mouseout(function() {
  $(this).hide();
  $("#jq").fadeIn();
 });
});
</script>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="jq" />
<img src="http://jqueryui.com/images/logo.gif" id="ui" />