[jQuery] fadein/fadeout conflicting

[backdoc]

I'm brand new to jQuery.  And, I'm wanting to make something fadeOut
when I hover or mouseover and fadeIn when I mouseout.  I tried the two
methods below.  But, when I leave the mouse cursor positioned over the
element, I get an unwanted blink effect.  It seems that when the
fadeOut() ends, it triggers the next method.  I wouldn't expect that.

I figure this is probably jQuery 101.  But, I couldn't find the answer
in the archives.

Any suggestions?

TIA,
backdoc

<script type="text/javascript">
$(document).ready(function() {
        $("a").click(function(e) {
                e.preventDefault;
                //alert("Hello world!");
        });
        $("a").hover(
                function(e) {
                        $(this).css("background", "white");
                        $(this).fadeOut(500);
                },
                function(e) {
                        $(this).css("background", "black");
                        $(this).fadeIn(100);
                });
/*
        $("a").mouseover(
                function(e) {
                        //alert(this.id);
                        $(this).css("background", "yellow");
                        $(this).fadeOut(500);
                });
        $("a").mouseout(
                function(e) {
                        $(this).css("background", "black");
                        $(this).fadeIn(100);
                });
*/
 });
</script>