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中無效。