Question

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 adipiscing 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);  
              });
      });

Answer 1

[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();
  });