Jquery fade <IMAGE background> on hover?

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

From stackoverflow

• 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).

• 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

  jakemcgraw : If your anchors contain text, then the text will fade in and out with the background. You'll have to use a different HTML layout, like
• Text
• , and then position the span absolutely.