我如何在jquery中为fadin和fadeout背景图像设置动画？

Question

我有一个背景图像,必须通过foverin和foverout效果对悬停事件进行动画处理.我怎么能这样做？

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

检查这个小提琴1.

如果您希望使用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);
}

Fiddle2