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

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

Fiddle2

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

1 个答案: