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