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