fade effect for background image sprite

fade effect for background image sprite

Hello,
I need to do fade in and fade out effect for html element , I styled the element to use background image and changing the position will display the active image

CSS:

#header h1{
    display:block;
    float: left;
    height: 123px;
    width: 310px;
    background:url(../images/logo.jpg) no-repeat 0 0;
    text-indent: -10000px;
}

#header h1 a{
    display:block;
    width:100%;
    height:100%;
}

#header h1 a:hover {
  background:url(../images/logo.jpg) no-repeat 0 -123px;
}

















JS:

$(document).ready(function() {

//$('#header h1 a:hover').css('background','none');
 
    // Bind a mouseenter event to #header > h1 > a element
   $('#header h1 a')
      .bind('mouseenter',function(){
      
        $('#header h1 a').css('background','url(./images/logo.jpg) no-repeat 0 -123px').hide().fadeIn();

      })

      .bind('mouseleave',function(){
         $(this).fadeOut('normal')

      });
 });
















the effect work only one time the next time I move mouse over the logo picture nothing occur , please advise

thanks