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

Your markup isn't valid; you need a `ul` or `ol` around those `li`'s. — Jared Farrish, Jul 14 '12 at 16:12
@John It looks like the proper wait to set the effect is `$('#tabs').tabs('option', 'fx', { effect : 'explode });` -- though I could be wrong. — Ohgodwhy, Jul 14 '12 at 16:15
The `{fx: {opacity: 'toggle'}}` does work, I did check that. You need to think a little about what you're doing: *Transitioning out* one tab, *transitioning in* another tab. Is what you're trying going to handle both actions? — Jared Farrish, Jul 14 '12 at 16:42
You can have a look also [here](http://stackoverflow.com/questions/1350666/jquery-ui-tabs-available-fx-options) — Stano, Jul 14 '12 at 16:48
@Stano - The issue is the use of the `effects` system in jQuery.ui. It's not quite that simple, and the `opacity` effect demonstrated does work. But `$.tabs()` doesn't handle `effects` like `explode`. — Jared Farrish, Jul 14 '12 at 16:50
http://stackoverflow.com/questions/2654885/applying-effects-to-jquery-ui-tabs — Ricardo Souza, Jul 14 '12 at 16:57
@JaredFarrish I am not much experienced in jQueryUI, but may be good to know, Jared. And also nice example below. — Stano, Jul 14 '12 at 17:32

score 4 · Accepted Answer · answered Jul 14 '12 at 17:00

4

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.

answered Jul 14 '12 at 17:00

Jared Farrish

48,585
17
95
104

How do you mean? I don't quite follow, the first or the second example? – Jared Farrish Jul 14 '12 at 17:13
Your example with 'explode' is great. It can be substituted with whichever effect wanted : 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. – John Jul 14 '12 at 17:43
Explode seems kinda messy for this; `puff` though works pretty well: http://jsfiddle.net/userdude/2TDsq/3/ – Jared Farrish Jul 14 '12 at 17:53
Is there any way to rather select the effect to happen on the existing panel instead of the new active content? i.e. the 'puff' / 'explode' whatever should use the current panel rather than the new one. I imagine this means the var target needs to change. Any ideas if this is possible? – John Jul 16 '12 at 11:28
You mean the one that is being hidden? That is the one the event is run on. The current one `$target.fadeIn()`. If you want that to take longer, you can change the time it takes to do the effect and the `$.fadeIn()`: http://jsfiddle.net/userdude/2TDsq/4/ – Jared Farrish Jul 16 '12 at 17:14

Add a jQuery UI show effect to UI tabs

1 Answers1