我正在使用 jquery ui 选项卡。我想在选项卡之间切换时应用滑动内容效果,即显示和隐藏选项卡内容。这是我的 DEMO
当我点击上面的导航时,我试图滑动标签 div 及其中的内容。所以 Nav link 1 会将 #tabs-1 的内容滑动到屏幕前面等等。
我目前没有滑动功能的脚本是:
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
我试过slideToggle
,还有fading out
和fading in
效果,但是都做不到上类。所以我正在寻求一些帮助,即使它只是在某个地方寻找,我将不胜感激,因为我不是最擅长 javascript 或 jQuery 的。
最佳答案
jQueryUI 内置了效果。无需自己动手。
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
这是一个显示和隐藏效果的例子:http://jsfiddle.net/isherwood/9jg4r/5
关于javascript - jQuery ui 选项卡 : sliding effect when switiching between tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24813339/