私はここに私のコードの作業バージョンを持っている隠されたdiv要素を順番に

Question

をのsetTimeoutとてclearTimeoutを使って： http://www.jsfiddle.net/brianrhea/5Hqs3/1/

私はリンクの上に置くと、それはまったく同じページの別の領域で隠されたdiv要素を表示します私はそれを望みます。

しかし、ユーザーが何も操作しない場合は、非表示のdivが自動的に1つずつ順番に切り替わるようにしたいと思います。 （関連するリンクが上に乗っているかのように太字になる）

ユーザーがリンクをホバーすると、サイクリングの終了とホバーの状態が引き継がれます。マウスが離れると、サイクリングが再び始まります。

私は解決策になると思うので、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(); 
    }); 

Answer 2

私はのsetIntervalがより良い仕事をすると思います。 3つのリンクの配列と3つのdivの対応する配列を作成します。 setInterval関数で、counter =（counter + 1）％3を実行し、それを使って表示するdivを決定する（そして他のすべてを非表示にする）、そしてどのリンクを太字にする（そしてunbold他のすべて）。次に、リンクのいずれかをホバー上でclearIntervalを使用します。ソート済み。