javascript - jQuery idTabs - 鼠标悬停时自动更改和淡入淡出

Question

我在即将对我的网站进行重新设计时使用 jQuery idTabs。我根据我的内容设计了它的样式，它看起来很棒，但有几个功能缺少我需要的功能。

首先，这是我现在正在使用的:

<script type="text/javascript">
    $("#featured").idTabs("!mouseover"); 
</script>

显然，上面的代码意味着它会在悬停时切换到下一个选项卡，从而无需单击。

这是我想要做的:

1 - 当用户未与标签进行交互时，让标签每隔指定的秒数自动更改。

2 - 当它们改变时，让它们褪色。 idTabs 中实际上已经有一个函数:

<script type="text/javascript"> 
    $("#adv2").idTabs(function(id,list,set){ 
        $("a",set).removeClass("selected") 
            .filter("[href='"+id+"']",set).addClass("selected"); 
        for(i in list) 
            $(list[i]).hide(); 
        $(id).fadeIn(); 
        return false; 
    }); 
</script>

唯一的问题是它不能很好地处理 mouseover 事件。它不是在每次 mouseover 时淡入，而是自动更改。

谁能帮我解决这个问题？

将不胜感激!谢谢!

Answer 1

在这里，我已经完成了在某个时间间隔自动更改选项卡的完整容器，无需鼠标悬停或单击。请检查一次演示链接。

演示: http://codebins.com/bin/4ldqp7r/2HTML

<div>
  <div id="adv2">
    <ul>
      <li>
        <a class="selected" href="#ani1">
          1
        </a>
      </li>
      <li>
        <a href="#ani2">
          2
        </a>
      </li>
      <li class="split">
      </li>
      <li>
        <a href="#ani3">
          3
        </a>
      </li>
      <li>
        <a href="#ani4">
          4
        </a>
      </li>
    </ul>
    <span>
      <p id="ani1">
        Click on the tabs to see a nice fade.
      </p>
      <p id="ani2">
        You're not impressed?
      </p>
      <p id="ani3">
        But it's so cool... in a nerdy way.
      </p>
      <p id="ani4">
        Download idTabs and have your cake. You can eat it too.
      </p>
    </span>
  </div>
</div>

jQuery

$(function() {

var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
        var current = $("#adv2 ul a.selected").attr("href");
        var index = ($.inArray(current, tabList) + 1) % tabList.length;
        tabClick(tabList[index], tabList, tabDiv);
    }

var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
        if (!tabList) {
            tabList = list;
        }
        if (action && action.event == "click") {

            timer && clearInterval(timer);
            timer = setInterval(rotate, interval);
        }

        $("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
        for (i in list) {
            $(list[i]).hide();
        }
        $(id).fadeIn();
        return false;
    }

$("#adv2").idTabs(tabClick);

});

** CSS:**

body{
  font: 10pt Calibri,Arial,sans-serif;
  text-align: center;
  color: #FFFFFF;
  background: none repeat scroll 0 0 #111111;
  margin: 0;
  padding: 0;
}

#adv2 {
  background: none repeat scroll 0 0 #181818;
  margin-left:5%;
  margin-top:5%;
  width: 500px;
}
#adv2 ul{
  display: block;
  float: left;
  height: 50px;
  width: 50px;
  margin:0px;
  background:#333;
}

#adv2 li {
  float: left;
}

li {
  list-style: none outside none;
}

#adv2 li a.selected {
  background: none repeat scroll 0 0 snow;
  color: #111111;
  font-weight: bold;
}

#adv2 li a {
  display: block;
  height: 25px;
  line-height: 22px;
  text-decoration: none;
  width: 25px;
}

#adv2 li a:hover {
  background:#0A0A0A;
}

#adv2 li.split {
  clear: both;
}

a{
  color: #FFFFFF;
}

a {
  outline: medium none;
}
#adv2 span {
  background: none repeat scroll 0 0 #181818;
  float: right;
  height: 50px;
  line-height: 45px;
  width: 410px;
}

演示: http://codebins.com/bin/4ldqp7r/2