jQuery CSS animation for background image

Question

I have this javascript code :

$(".linksColl a li").hover(function () {
                 $(this).css({
                    "background-image" : "url(images/links/linkHover1.png)",
                    "background-position" : "center center",
                    "background-repeat" : "no-repeat"});              
        });

        $(".linksColl a li").mouseout(function () {
                $(this).css({
                    "background-image" : "",
                    "background-position" : "",
                    "background-repeat" : ""});                      
        });

I want to add animation to it like fadeIn and fadeOut for the background image so when hover fadeIn effect apply for the background image and on mouseout fadeOut effect apply for the background image

How I can do it?

Answer 1

Set id for the image

$('.linksColl a li').mouseenter(function() {
      $('#img').fadeIn('slow', function() {
        // Animation complete
      });
    });

$('.linksColl a li').mouseout(function() {
      $('#img').fadeIn('slow', function() {
        // Animation complete
      });
    });

Hope this helps.....

Answer 2

I don't think you can do that. But the is still way to achieve what you want. You could, for example, create a wrapper DIV (or ul) containing the background image and fadeOut this container (you can't fadeOut background, but you can fade the container DIV without problem). If this is too hard because of the way you built your html page, you could convert the background-image into a simple image () and use z-index -1 to make it act as background and then fade this img.