Add a jQuery UI show effect to UI tabs

Question

Summary: Got JQuery tab implemented. Simply want to add an effect to the tab.

HTML code:

   <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 Code:

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

This works fine to implement the tab GUI and create the tabbed interface. I'd like to now implement an effect. e.g. 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.

How do I go about this? From documentation I have read:

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

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

   );
   });

This code does nothing constructive to further the animation.

Have tried

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

But this too is ineffective.

An example they provide from documentation which does work:

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

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

Answer 1

To accomplish what you want with explode (assuming that is actually what you want to use and it wasn't an example), you need to handle the $.tab() show event; at least as far as I know, the fx subsystem built into $.tabs() doesn't allow you to select UI effects.

So, something more or less like:

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

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

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

Note, if you just want to use the built-in fx option system, you should:

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

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

This, however, is not difficult and others are linking to the (probably numerous) SO duplicates on how to use that setup.