動畫背景替換

Question

如何動畫背景圖片替換？

我有兩個圖像，works.png和works-hover.png。第一個是黑暗的，第二個是光。想要用淡入/淡出等動畫來替代黑暗中的燈光。這兩個圖像都是透明PNG。

謝謝。

Answer 1

在CSS中，這很簡單，只需改變使用另一個CSS類和jQuery的背景圖像：

.myElement 
{ 
    background-image: url(path/to/flie/works.png); 
} 

.roll 
{ 
    background-image: url(path/to/flie/works-hover.png); 
} 

對於褪色，使用jQuery：

$(function() { 
    //fade the element, load new bg, bring back the element 
    $(".myElement").hover(function() { 
     $(this).animate({ 'opacity': 0}, 100), 
      $(this).toggleClass('roll'), 
       $(this).animate({'opacity': 1}, 100); 
    }); 
}); 

I have made an example for you here。