Question

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

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

我的问题是，如果用户没有将鼠标悬停在隐藏的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>

的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

使用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);
    });
});

Answer 2

我分叉你的代码并在这里纠正 http://www.jsfiddle.net/sTWCg/4/

自动循环隐藏的div

2 个答案: