[jQuery] How do i get the hover effect working with fadeIn?

[Mark]

Hey,

this works fine:

# html

<div id="hover-demo2" style="background-color: white;">
be nice and don't fade the text!!!
</div>

# javascript

$('#hover-demo2').hover(function() {
  $(this).css({background: "red", color: "black"});
}, function() {
  $(this).css({background: "white", color: "black"});
});

But if i change the javascript code to this:
$('#hover-demo2').hover(function() {
  $(this).fadeIn("slow").css({background: "red", color: "black"});
}, function() {
  $(this).css({background: "white", color: "black"});
});

now what happens is:
1. for a split second the full div turns white (including all it's contents)
2. it's fading in but with the text as well

What i would like:
the div remains what i set it and the fade in effect is ONLY changing
the background color.

Does anyone know how i can get that done? it most be possible because
it's done here:
http://www.stilbuero.de/2005/07/19/whateverhover-fast-and-easy/ (hover
over: "whatever:hover, fast and easy" and wait a second to see the
effect. that's the effect i want when hovering (not when the hover
ends like in that example))

Also how do i reset an effect when it's in use?
for example when that hover effect works.. when you hover the effect
when the first effect is still busy the effect should restart instead
of finishing the first effect and than running the second.

Thanx,
Mark.