带动画的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;
}
答
解决方案是使用jQuery中的fx:功能。
$('#tabstrip').tabs({ fx: { width: 'show', duration: 'slow'} });
不过,我很困惑可以通过这个函数传递什么。如果有人有想法,我很想知道!
手风琴是不是控制你在找什么? http://jqueryui.com/demos/accordion – eKek0 2009-07-30 14:30:42