Trying to delay JQuery hover function
<p>I have a navigation bar with different list elements, and I'm trying to call up different background images for each one whenever a user hovers over the element. I've gotten it to work, but when I try to change the code so the images fade in and out, I'm running into roadblocks.</p>

<p>Here's the Javascript I'm using:</p>

<pre><code>$(document).ready(function() {
    $("li").hover(
        function () {
            var navid = $(this).attr('id'); 
            $(this).addClass(navid);  
        },
        function () {
            var navid = $(this).attr('id'); 
            $(this).removeClass(navid);  }
    );
});
</code></pre>

<p>I've tried setTimeout and transitions without any luck. Any help would be much appreciated. </p>
