jQuery制表符动画无效

出于某种原因，我无法使用任何动画来使用我的jQuery UI选项卡。我已经尝试了许多here的例子，但没有成功。jQuery制表符动画无效

这是我如何布置我的选项卡。

<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 } });

的标签的工作，他们是如何想，但没有动画？有人知道为什么

来源

2013-04-11 Romes

您需要提供该插件。但是，在您提供的链接中，似乎插件下载不再存在。 – Dom 2013-04-11 16:43:56

我实际上没有使用该库，我从http://jqueryui.com/download/ – Romes 2013-04-11 16:46:41

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

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

http://jsfiddle.net/U287r/

来源

2013-04-11 16:50:27

获得了标签UI。 fadeIn和fadeout可以工作，但如果我做$（“#tabs”）.tabs（{hide：{effect：“explode”，duration：1000}}）;我什么都没有得到......我认为这是因为我没有包含'show' – Romes 2013-04-11 16:53:34

与爆炸一起工作：http://jsfiddle.net/U287r/1/ – 2013-04-11 16:57:45

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

你可以通过使用boolean,number,string或object来解决这个问题。

布尔：

设置为true时，面板将淡出与默认的持续时间和默认的宽松政策。

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

DEMO： http://jsfiddle.net/dirtyd77/ppgH9/5/

NUMBER（以毫秒为单位）：

主机将淡入与指定的时间和默认宽松。

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

DEMO： http://jsfiddle.net/dirtyd77/ppgH9/6/

STRING：

的值可以是一个内置的jQuery动画制作方法，如名“slideDown”，或者jQuery UI效果的名称，比如“f旧”。无论哪种情况，该效果都将与默认持续时间和默认缓动一起使用。

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

DEMO： http://jsfiddle.net/dirtyd77/ppgH9/4/

OBJECT：

如果该值是一个对象，则效果，延迟，持续时间，和缓和性能可能提供。

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

DEMO： http://jsfiddle.net/dirtyd77/ppgH9/1/

来源

2013-04-11 16:51:27 Dom

这似乎也适用。谢谢 – Romes 2013-04-11 16:56:09

@Romes肯定的事情，我已经添加了更详细的动画解释。希望这可以帮助！ – Dom 2013-04-11 17:10:40

jQuery制表符动画无效

回答

相关问题