Question

I have multiple icon IMG’s listed side by side in a UL with css/background-images.

When you hover over a single icon the IMG fades to 0 and then the css/background-image becomes visible.

I can get it to fade back fine, but the background-image stays visible and shows a few pixels behind the IMG (lets say the main IMG is black and the css/background-image is orange).

If I set the background-image position to 0 0 then it disappears before the fadeTo of the IMG is finished.

So basically I want the background-position to change once the “normal, 1” has finished.

I hope that makes sense.

Can anybody help?

Here is the code:

$("ul.socials li").hover(function() { //On hover...

    var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

    //Set a background image(thumbOver) on the <a> tag - Set position to bottom
    $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat 0 -37px'});

    //Animate the image to 0 opacity (fade it out)
    $(this).find("span").stop().fadeTo('normal', 0 , function() {
        $(this).hide() //Hide the image after fade
    });
} , function() { //on hover out...
    //Fade the image to full opacity 
    $(this).find("span").stop().fadeTo('normal', 1).show();
    $(this).find("a.thumb").css({'background-position' : '0 0'});
});

Answer 1

“If I set the background-image position to 0 0 then it disappears before the fadeTo of the IMG is finished. So basically I want the background-position to change once the “normal, 1″ has finished.”

Change your background position on fadeTo callback:

//Fade the image to full opacity
var $li = $(this);
$(this).find("span").stop().fadeTo('normal', 1, function() { 
   $li.find("a.thumb").css({'background-position' : '0 0'});
}).show();

or

//Fade the image to full opacity
var $li = $(this);
$(this).find("span").stop().fadeTo('normal', 1, function() { 
   $(this).parent().find("a.thumb").css({'background-position' : '0 0'});
}).show();