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