动画背景替换 [英] Animate background replacement

问题描述

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

How to animate background image replacement?

我有两个图片，works.png和works-hover.png。第一个是黑暗，第二个是光。想用淡入淡出替换暗与淡入/出动画。两张图片都是透明的png。

I have two images, works.png and works-hover.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.

谢谢。

推荐答案

这很容易，只需使用另一个CSS类和jQuery更改背景图片：

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);
}

对于衰落，使用jQuery：

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);
    });
});

我在这里为你举个例子。

这篇关于动画背景替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！