我如何在jquery中動畫fadin和淡出背景圖片？

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

Fiddle2