Question

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

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

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可以更好地完成工作。创建三个链接的数组以及三个div的相应数组。现在一个设置为0的计数器var。在setInterval函数中，执行counter =（counter + 1）％3，并使用它来确定要显示哪个div（并隐藏所有其他div）以及使哪个链接变为粗体（和unbold）所有其他人）。然后在悬停时使用clearInterval获取任何链接。排序

使用setTimeout和clearTimeout循环隐藏div

2 个答案: