javascript - 使用 setTimeout 和clearTimeout 循环浏览隐藏的 div

Question

我在这里有一个代码的工作版本: http://www.jsfiddle.net/brianrhea/5Hqs3/1/

当我将鼠标悬停在链接上时，它会在页面的另一个区域中显示一个隐藏的 div，正如我希望的那样。

但是，如果用户不采取任何操作，我希望隐藏的 div 一次自动循环一个。 (并使关联的链接变为粗体，就像将鼠标悬停在其上一样)

如果用户将鼠标悬停在链接上，则循环将退出并接管悬停状态。当他们的鼠标离开时，循环又开始。

我研究了 setTimeout/clearTimeout，因为我认为这是解决方案，但没有运气。

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