使用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以循環隱藏層

回答

相關問題