jQuery淡入淡出 <IMAGE background> 悬停？

Question

有一个没有背景的链接，还有一个css规则，该规则会在悬停时更改背景。

父级背景为白色，悬停链接-.png背景图片。

如何从白色到背景图像缓慢地进行悬停效果？

谢谢。

---

li a {}
li a:hover { background: url(image.png) 0 0 no-repeat; }

Answer 1

的CSS

li {
  background: #FFF;
}

li a {
  opacity: 0;
  display:block;
  height:200px; /* Image height */
  width:200px; /* Image width */
  background:transparent url(image.png) top left no-repeat;
}

的JavaScript

$(function(){
  $("li a").hover(function(){
    $(this).stop();
    $(this).animate({"opacity":1}, "slow");
  }, function(){
    $(this).stop();
    $(this).animate({"opacity":0}, "slow");
  });
});

参见http://docs.jquery.com/Effects

Answer 2

想到的一件事是从战略上将设置有背景图像的图层和具有纯色的图层彼此叠加，然后悬停，为正确的物体设置Opacity属性的动画（如果顶部的物体变为透明，则底部的物体会出现通过）。

Answer 3

透明在IE中无效。