Jquery fade-in and out loop
<p>I've updated an old javascript of mine to work with Jquery recently. </p>

<p>It does the following:</p>

<p>When a user hovers over a link with a class of <code>content-fade</code> it causes content with an associated <code>id</code> to fade-in and then within a set time fade-out unless the user leaves their mouse on the content.</p>

<p>I need to change the script again and have it loop through a set of <code>id</code>s aka id1, id2, id3...etc. Ideally causing the only the content with the individual associated id to show. I've just started working with JQuery and I'm not sure how best to approach this. The code is below if anyone could point me in the right direction I would appreciate it.</p>

<pre><code>  $(document).ready(function() {
        var hide = false;
        $(".content-fade").hover(function(){
            if (hide) clearTimeout(hide);
            $("#id").fadeIn();
        }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
        $("#id").hover(function(){
            if (hide) clearTimeout(hide);
       }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
 });
</code></pre>
