动画背景替换

Question

如何动画背景图片替换？

我有两个图像，works.png 和works-hover.png。第一个是暗的，第二个是亮的。想要在悬停时用淡入/淡出等动画替换深色。两张图片都是透明的png。

谢谢。

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.