带动画的 jQuery 选项卡

Question

我有一个 jQuery 选项卡部分 - 我想为其中的面板设置动画。下面是代码。我基本上想让“vertical-tabstrip-visible-content”成为一个滑动面板 - 这样当单击每个链接时，它将关闭现有面板并将正确的、相应的面板滑入 View 。

有什么想法可以使用 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

解决方案是使用 jquery 中的 fx: 功能。

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

尽管如此，我还是很困惑可以通过这个函数传递什么。如果有人有想法，我很想知道!