Using setTimeout and clearTimeout to Cycle Through Hidden divs

I've got a working version of my code here: http://www.jsfiddle.net/brianrhea/5Hqs3/1/

When I hover over a link, it displays a hidden div in another area of the page exactly as I would like it to.

But, if the user doesn't take any action, I'd like the hidden divs to automatically cycle through one at a time. (and having the associated link become bold just as if they were hovered over it)

If a user then hovers over the links, the cycling quits and the hover states take over. When their mouse leaves, the cycling begins again.

I've looked in to setTimeout / clearTimeout as I think that'd be the solution, but with no luck.

Working version at jsfiddle: http://www.jsfiddle.net/brianrhea/5Hqs3/1/

<a class="sliderLinks" data-id="billing" href="#">Billing Reminders</a><br />
<a class="sliderLinks" data-id="collections" href="#">Collections</a><br />
<a class="sliderLinks" data-id="payments" href="#">Payments</a>
<br /><br />

<div id="defaultMessage">
Default Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="textMessages">

<div class="hidden" id="billing">
Billing ipsum dolor sit amet, consectetur a开发者_高级运维dipiscing elit. Maecenas id ligula eget purus</div>

<div class="hidden" id="collections">
Collections Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div class="hidden" id="payments">
Payments orem ipsum dolor sit amet, consectetur adipiscing elit
</div>

</div>

Javascript

 $(document).ready(function(){
         $(".sliderLinks").hover(
              function(){
                  var id = $(this).data("id");
                  if(id!==undefined){
                   $("#" + id).fadeIn(500);
                  }
                  $("#textMessages").fadeIn(500);
                  $("#defaultMessage").hide();

              },function(){
                  $("#textMessages").hide();
                  $(".hidden").hide();
                  $("#defaultMessage").fadeIn(500);  
              });
      });

---

[Demo]

$(document).ready(function(){

     var i = 0;
     var links = $(".sliderLinks");
     var len = links.length;
     var interval;    

     function hoverIn(target, clear) {
        if (clear) {
            links.removeClass('hoverBold');
            $(".hidden").hide();
            clearInterval(interval);
            interval = null;
        }
        var id = $(target).data("id");
        if(id) {
           $("#" + id).fadeIn(500);
        }
        $("#textMessages").fadeIn(500);
        $("#defaultMessage").hide();
    }    

    function hoverOut(start) {
        $("#textMessages").hide();
        $(".hidden").hide();
        $("#defaultMessage").fadeIn(500);
        if (start) {
            startCycle();
        }
    }   

    links.hover(
        function(){ hoverIn(this, true); },
        function(){ hoverOut(true); }
    );

    function startCycle() {
        i = 0;
        clearInterval(interval);
        interval = setInterval(function () {
            hoverOut();
            hoverIn(links[i]);
            var prev = (i-1 < 0) ? len-1 : i-1;
            $(links[i]).addClass('hoverBold');
            $(links[prev]).removeClass('hoverBold');
            if (++i >= len) {
              i = 0;
            }
        }, 1000);
    }

    startCycle();
  });

---

I think setInterval will do the job better. Create an array of your three links and a corresponding array of your three divs. Now a counter var which is set to 0. In the setInterval function, do counter = (counter+1)%3, and use that to determine which div to display (and hide all others) and which link to make bold (and unbold all others). Then use clearInterval on hover for any of the links. Sorted.