Question

出于某种原因，我无法使用任何动画来处理我的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 } });

标签的工作方式如何，但没有动画？谁知道为什么？

Answer 1

您正在使用旧的API文档。请检查此http://api.jqueryui.com/tabs/#option-hide

您需要使用hide和show属性来定义动画，而不是fxFade等。

http://jsfiddle.net/U287r/

Answer 2

使用jQuery标签hide option和show option制作动画。

您可以使用boolean，number，string或object来解决此问题。

的 BOOLEAN： 的

设置为true时，面板将以默认持续时间和默认缓动方式淡入。

$('#tabs').tabs({ hide: true, show: false });

样本： http://jsfiddle.net/dirtyd77/ppgH9/5/

NUMBER（以毫秒为单位）：


面板将以指定的持续时间和默认缓动方式淡入。

$('#tabs').tabs({ hide: 1000, show: 2000 });

样本： http://jsfiddle.net/dirtyd77/ppgH9/6/

的 STRING： 的


值可以是内置jQuery动画方法的名称，例如“slideDown”，也可以是jQuery UI效果的名称，例如“fold”。在任何一种情况下，效果都将使用默认持续时间和默认缓动。

$('#tabs').tabs({ hide: 'fade', show: 'explode' });

样本： http://jsfiddle.net/dirtyd77/ppgH9/4/

的 OBJECT： 的


如果值是对象，则可以提供效果，延迟，持续时间和缓动属性。

$('#tabs').tabs({ hide: { effect: "fade", duration: 200 }, show: { effect: "fade", duration: 200 } });

样本： http://jsfiddle.net/dirtyd77/ppgH9/1/

jQuery Tabs动画不起作用

2 个答案: