javascript - 自动循环显示隐藏的div

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

当我将鼠标悬停在链接上时，它会完全按照我的意愿在页面的另一个区域中显示一个隐藏的div。

我的问题是，如果用户不将鼠标悬停在隐藏的div上，但又仍然允许“悬停”交互，该如何自动循环显示它们。

上面的jsfiddle的工作版本，如果您愿意的话，这里是代码。

<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>

Java脚本

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

最佳答案

使用setTimeout调用高级功能。调用超时时，请为下一项再次设置超时。

如果用户将鼠标悬停在某个项目上，请使用clearTimeout删除当前超时。当用户离开项目时，开始新的超时。

更新：

使用您的原始HTML，我将其拼凑在一起。它不是完美的，但基本上是您要的：

$(document).ready(function(){
   var dispID = new Array("billing", "collections", "payments");
   var dispCounter = 0;
   var timer = setTimeout(iterate, 1000);

   function iterate() {
       $("#defaultMessage").hide();
       $("#" + dispID[dispCounter]).fadeOut(500, function() {
           if (++dispCounter == dispID.length) dispCounter = 0;
           $("#" + dispID[dispCounter]).fadeIn(500);

           timer = setTimeout(iterate, 1000);
       });
   }

   $(".sliderLinks").hover(function() {
       clearTimeout(timer);
       var id = $(this).data("id");
        if (id != null) {
            $("#" + id).siblings().fadeOut(500, function() {
               $("#" + id).fadeIn(500);
            });
        }
    }, function() {
        timer = setTimeout(iterate, 1000);
    });
});

关于javascript - 自动循环显示隐藏的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4743020/