Animating “src” attribute

Question

I have an HTML document. It looks like this:

When the user hovers \"stackinfo\" image, I w

Answer 1

You could animate the opacity to zero, use the callback to change the image source and bind an event handler for when the image loads that animates the opacity back.

$('.sprite').on("mouseover",function(e){
    $(this).animate({
        opacity: 0
    },1000, function(){
        setTimeout(function(){
            $('.sprite').animate({
                opacity: 1
            },1000);
        },50);
        $('.sprite').css("background","url(someurl)");
    });
})

See this example: http://jsfiddle.net/nHC9U/