javascript - 如何在 jquery 中为淡入淡出背景图像设置动画？

Question

我有一个背景图像，必须通过悬停事件的淡入和淡出效果进行动画处理。我怎么能这样做？

Answer 1

HTML：

<div></div>

CSS：

div {
    width:200px;
    height:200px;
    background-image:url(http://dummyimage.com/100x100/000/fff);
}

jQuery：

$('div').hover(function () {
    $(this).stop().fadeOut("1000", function () {
        $(this).css("background", "url('http://dummyimage.com/100x100/000/ff0000')").fadeIn(1000);
    });
}, function () {
    $(this).stop().fadeOut("1000", function () {
        $(this).css("background", "url('http://dummyimage.com/100x100/000/fff')").fadeIn(1000);
    });
});

检查这个fiddle1。

如果您希望使用CSS3 过渡，那么，

改成CSS这样

div {
    height: 200px;
    width: 200px;
    color: black;
    background-image:url(http://dummyimage.com/100x100/000/fff);
    transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -webkit-transition: background-image 1s linear;
    -ms-transition: background-image 1s linear;
}
div:hover {
    background-image:url(http://dummyimage.com/100x100/000/ff0000);
}

小提琴2