0

摘要：实现了 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'、'幻灯片'，'转移'。

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

   $("#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' } } 
  );
4

1 回答 1

4

为了完成你想要的explode（假设这实际上是你想要使用的，它不是一个例子），你需要处理$.tab() show事件；至少据我所知，fx内置的子系统$.tabs()不允许您选择 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 副本。

于 2012-07-14T17:00:06.950 回答