Animate background replacement

How to animate background image replacement?

I have two images, works.png and works-hov开发者_如何学Goer.png. First one is dark, second is light. Want to replace dark with light one on hover with animation like fadeIn/Out. Both images are transparent png.

Thanks.

In CSS this is very easy, just change the background image using another CSS class and jQuery:

.myElement
{
    background-image: url(path/to/flie/works.png);
}

.roll
{
    background-image: url(path/to/flie/works-hover.png);
}

For the fading, use jQuery:

$(function() {
    //fade the element, load new bg, bring back the element
    $(".myElement").hover(function() {
        $(this).animate({ 'opacity': 0}, 100), 
            $(this).toggleClass('roll'),
                $(this).animate({'opacity': 1}, 100);
    });
});

I have made an example for you here.