动画背景替换

Question

如何为背景图片替换设置动画？

我有两个图片，works.png和works-hover.png。第一个是黑暗，第二个是光。想要使用fadeIn / Out等动画将鼠标悬停在光线上。两张图片都是透明的。

感谢。

Answer 1

在CSS中，这非常简单，只需使用另一个CSS类和jQuery更改背景图像：

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

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

对于淡入淡出，请使用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