动画背景替换

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。