jQuery Tabs动画不起作用

ket 发布于 2019-03-09 css 最后更新 2019-03-09 14:40 3 浏览

出于某种原因,我无法使用任何动画来使用我的jQuery UI选项卡。我已经尝试了很多来自here的例子,但没有成功。 这是我如何布置我的标签。

<div id="tabs">
    <ul class="tabsHeader">
        <h1>PARTNERSHIPS</h1>
        <li><a href="#tabs-1"><span class="toothIcon"></span>The Benefits</a></li>
        <li><a href="#tabs-2"><span class="avatarIcon"></span>Join Us</a></li>
    </ul>
<div class="clearfix"></div>
<div id="tabs-1">
        <div class="content">
            <h1>header</h1>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </div>
    </div>
<div id="tabs-2">
        <div class="content">
        <p>some text</p>
            <form>
                <input type="text" name="name" placeholder="NAME" />
                <input type="text" name="email" placeholder="EMAIL" />
                <input type="text" name="phone" placeholder="PHONE" />
                <input type="text" name="city" placeholder="CITY OF PRACTICE" />
                <input type="submit" />
            </form>
        </div>
    </div>
</div>
初始化如下所示:
$('#tabs').tabs({ fxFade: true, fxSpeed: 'fast' });
要么
$( "#tabs" ).tabs({ hide: { effect: "explode", duration: 1000 } });
标签的工作原理是如何设想的,但没有动画?有人知道为什么
已邀请:

ueum

赞同来自:

您正在使用旧的API文档。检查此http://api.jqueryui.com/tabs/#option-hide 您需要使用hideshow属性来定义动画,而不是fxFade等。 http://jsfiddle.net/U287r/

cvelit

赞同来自:

使用jQuery Tab的hide optionshow option进行动画制作。 您可以使用booleannumberstringobject来解决此问题。


布尔:
When set to true, the panel will fade in with the default duration and the default easing.
 $('#tabs').tabs({ 
     hide: true,
     show: false   
 });
DEMO: http://jsfiddle.net/dirtyd77/ppgH9/5/
NUMBER(以毫秒为单位):
The panel will fade in with the specified duration and the default easing.
 $('#tabs').tabs({ 
     hide: 1000,
     show: 2000
 });
DEMO: http://jsfiddle.net/dirtyd77/ppgH9/6/
串:
The value can either be the name of a built-in jQuery animation method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing.
 $('#tabs').tabs({ 
     hide: 'fade',
     show: 'explode'   
 });
DEMO: http://jsfiddle.net/dirtyd77/ppgH9/4/
目的:
If the value is an object, then effect, delay, duration, and easing properties may be provided.
 $('#tabs').tabs({ 
     hide: { effect: "fade", duration: 200 },
     show: { effect: "fade", duration: 200 }    
 });
DEMO: http://jsfiddle.net/dirtyd77/ppgH9/1/