Jquery исчезает <фон изображения> при наведении?

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

Прозрачный недопустим в IE.

Answer 3

Одна вещь, которая приходит на ум, - это стратегическое размещение слоев с установленным фоновым изображением и слоев сплошным цветом друг над другом и при наведении на них, анимируя свойство Непрозрачность нужной вещи (если вещь сверху становится прозрачной, то вещь снизу пробивается).