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

Question

У меня есть раздел вкладки 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;
}

Answer 1

Решением было использование функции fx: в jquery.

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

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

Answer 2

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