使用setTimeout和clearTimeout以循环隐藏层

我有我的代码在这里工作的版本： http://www.jsfiddle.net/brianrhea/5Hqs3/1/使用setTimeout和clearTimeout以循环隐藏层

当我将鼠标悬停在一个链接，它会显示在页面的另一区域一个隐藏的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); 
       }); 
     });

来源

2011-01-20 brianrhea

我看不到的setTimeout或clearTimeout任何电话 - 是缺什么吗？ – Pointy 2011-01-20 15:28:57

我试图做$（“sliderLinks：第一”）鼠标悬停（），但并没有做什么，我希望，所以我没有继续...这是个问题提出 – mplungjan 2011-01-20 15:28:58

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

来源

2011-01-20 16:08:24 galambalazs

我想的setInterval会做的工作做得更好。创建一个三个链接的数组和你的三个div的相应数组。现在被设置为0。在setInterval函数的计数器变种，执行计数器=（计数器+ 1）％3，并用它来确定显示哪些DIV（和隐藏所有其他）并且使该链路粗体（和取消粗体所有其他人）。然后对任何链接使用悬停时的clearInterval。排序。

来源

2011-01-20 15:47:26

使用setTimeout和clearTimeout以循环隐藏层

回答

相关问题