向 UI 选项卡添加 jQuery UI 显示效果

Question

总结：实现了 JQuery 选项卡。只是想为选项卡添加效果。

HTML 代码：

   <div id=tabs >
    <ul>
   <li><a href="#div1"><span>Div1</span></a></li>
    <li><a href="#div2"><span>Div2</span></a></li>
    <li><a href="#div3"><span>Div3</span></a></li>
     </ul>
    <div id=div1 ></div>
    <div id=div2 ></div>
    <div id=div3 ></div>
     </div>

JQuery 代码：

 $(document).ready(function() {
  $("#tabs").tabs();
 });

这可以很好地实现选项卡 GUI 并创建选项卡式界面。 我现在想实现一个效果。 例如'blind'，'bounce'，'clip'，'drop'，'explode'，'fold'，'highlight'，'puff'，'pulsate'，'scale'，'shake'，'size'，'slide ', '转移'。

我该怎么做？从我读过的文档中：

   $("#tabs").tabs(
   //here is where there should be implementation of the effect

   "#div1",{effect:'explode'}
   "#div2",{effect:'explode'}
   "#div3",{effect:'explode'}

   );
   });

这段代码对进一步的动画没有任何建设性的作用。

试过了

$("#div1"){effect:'effectname' 'effectproperties' }

但这也是无效的。

他们从文档中提供的一个确实有效的例子：

 $("#tabs").tabs(
   //here is where there should be implementation of the effect

 { fx: { opacity: 'toggle' } } 
  );

Answer 1

要使用explode 完成您想要的（假设这实际上是您想要使用的并且它不是示例），您需要处理$.tab() show 事件；至少据我所知，$.tabs() 内置的fx 子系统不允许您选择 UI 效果。

所以，或多或少有点像：

$("#tabs").tabs({
    show: function(event, ui) {
        var $target = $(ui.panel);

        $('.content:visible').effect(
            'explode',
            {},
            1500,
            function(){
                $target.fadeIn();
        });
    }
});

http://jsfiddle.net/userdude/2TDsq/2

注意，如果你只想使用内置的fx选项系统，你应该：

$("#tabs").tabs(
    {fx: {opacity: 'toggle'}}
);

http://jsfiddle.net/userdude/2TDsq/1/

然而，这并不难，其他人正在链接到（可能很多）关于如何使用该设置的 SO 副本。