Jquery在悬停时淡出<img background=""/>？

Question

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

父bg为白色，悬停链接 - .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

首先想到的是战略性地将具有backgroundimage设置的图层和具有纯色的图层放在彼此的顶部，并在悬停时，为正确的事物设置Opacity属性的动画（如果顶部的东西变得透明，那么在底部通过）。

Answer 3

透明在IE中无效。