Jquery fade <IMAGE background> on hover?

Question

There is a link, with no background, and a css rule, which changes background on hover.

Parent bg is white, link on hover - .png background image.

How can I do a hover effect slowly, from white to my background image?

Thanks.

---

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

Answer 1

One thing that comes to mind is strategically placing layers with backgroundimage set and layers with solid color on top of each other, and on hover, animating the Opacity property of the right thing (if the thing on top becomes transparent, the thing on bottom comes through).

Answer 2

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");
  });
});

See http://docs.jquery.com/Effects