error and delay on background fade in

this code is giving me an error, on mouse h开发者_StackOverflowover it shows a delay on the background change and i really dont know what its the problem. does anyone know what the problem is?

$('#compareDiv').hover(
     function(){
         $(this).data( $(this).css('background') );
         $(this).fadeOut().css('background', 'url(images/compare-V1.png) bottom left no-repeat' ).fadeIn();  
     },

     function(){ 
       $(this).fadeOut().css('background', $(this).data('background') ).fadeIn(); 

     } );

check this out

What is it you are trying to do? One of the problems is that the fadeOut() method is asynchronous. This means, you will have to provide a callback in order to execute a function after the animation has completed. Your css background is getting set as soon as the animation is started. Also, since you chain the fadeIn() right after the fadeOut(), it is probably creating some weird results. You need to provide callbacks to the animation methods like this:

$(this).fadeOut(function() {
    $(this).css('background', 'url(images/compare-V1.png) bottom left no-repeat');
    $(this).fadeIn();
});

The other problem you're going to run into is if the user hovers in and hovers out really quickly the animations are going to queue up. What I would recommend is using a brief delay before starting the animation, and cancelling the timeout if the user hovers out quickly.