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/2 的 HTML

<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