jQuery Вкладки с анимацией

Question

У меня есть вкладка в разделе jQuery - и я хочу анимировать панели внутри нее. Ниже приведен код. Я в основном хочу сделать «вертикальную полоску видимого содержимого» скользящей панелью - так, что, как только будет нажата каждая ссылка, она закроет существующие панели и сдвинет правильную, агрессивную сторону.

Любые идеи о том, как это можно достичь с помощью jQuery? (Я уже использую вкладки пользовательского интерфейса jQuery для эффекта табуляции).

<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; 
} 

Answer 1

Решение заключалось в использовании функции fx: внутри jquery.

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

Тем не менее, я очень смущен тем, что можно передать через эту функцию. Если у кого есть идеи, я бы с удовольствием узнал!

Answer 2

Вы посмотрели плагин LocalScroll?