带动画的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选项卡

回答

相关问题