帶動畫的jQuery選項卡

我有一個jQuery選項卡部分 - 我想爲其中的面板設置動畫。以下是代碼。我基本上想讓「vertical-tabstrip-visible-content」是一個滑動面板 - 當每個鏈接被點擊時，它將關閉現有的面板並將正確的，相應的滑動面板滑動到視圖中。帶動畫的jQuery選項卡

任何想法如何使用jQuery來實現？（我已經使用jQuery UI選項卡作爲選項卡效果）。

<div id="tabstrip" class="vertical-tabstrip" > 
    <ul class="vertical-tabstrip-tabs"> 
     <li><a href="#vid-1">Tab 1</a></li> 
     <li><a href="#vid-2">Tab 2</a></li> 
     <li><a href="#vid-3">Tab 3</a></li>           
    </ul> 
    <div class="vertical-tabstrip-visible-content-container" id="vid-1"><div class="vertical-tabstrip-visible-content">Content 1</div></div> 
    <div class="vertical-tabstrip-visible-content-container" id="vid-2"><div class="vertical-tabstrip-visible-content">Content 2</div></div> 
    <div class="vertical-tabstrip-visible-content-container" id="vid-3"><div class="vertical-tabstrip-visible-content">Content 3</div></div>      
</div> 

/********************************************************** 
jQUERY UI TABSTRIP 
***********************************************************/ 

.ui-tabs .ui-tabs-hide { 
    display: none; 
} 

.ui-tabs a { 

} 
.ui-tabs-selected a { 
    border-style: none; 
    border-color: inherit; 
    border-width: 0; 
    background: url('../../images/demo-config-on.gif') no-repeat right 50% #f8a230; 
    padding-right:18px;  color:#fff;  margin-right:-10px;  margin-bottom: 0px; 
} 

/********************************************************** 
HORIZONTAL TABSTRIP 
***********************************************************/ 

.vertical-tabstrip { 
    margin: 0px; 
    padding: 0px; 
} 

.vertical-tabstrip-tabs { 
    float: left; 
    width: 260px; 
    margin: 0px; 
    background: #000; 
} 

.vertical-tabstrip-tabs li { 
    text-align: left; 
    list-style: none; 
    font-size: 11px; 
    padding: 0 0 0 10px; 
    margin: 3px 0; 
} 
.vertical-tabstrip-tabs li a:link, 
.vertical-tabstrip-tabs li a:visited { 
    display:block; padding:1px 8px 4px; 
} 

* html .vertical-tabstrip-tabs li a:link, 
* html .vertical-tabstrip-tabs li a:visited { 
    padding:1px 8px 2px; 
} 

.vertical-tabstrip-tabs li a:hover, 
.vertical-tabstrip-tabs li a:active { 
    background-color:#f8a230 
} 

.vertical-tabstrip-visible-content-container { 
    padding: 3px 0 0 10px; 
    display: table-cell; 
    height: 100%; 
} 
.vertical-tabstrip-visible-content { 
    display: table-cell; 
    padding: 0px 0px 15px; 
    background: #aaa; 
}

來源

2009-07-30 Ciel

手風琴是不是控制你在找什麼？ http://jqueryui.com/demos/accordion – eKek0 2009-07-30 14:30:42

解決方案是使用jQuery中的fx：功能。

$('#tabstrip').tabs({ fx: { width: 'show', duration: 'slow'} });

不過，我很困惑可以通過這個函數傳遞什麼。如果有人有想法，我很想知道！

來源

2009-07-30 15:50:48 Ciel

你看過LocalScroll插件嗎？

來源

2009-08-15 22:01:14 Mottie

帶動畫的jQuery選項卡

回答

相關問題