views:

67

answers:

1

Is it possible to apply an effect to a jquery-ui tab, I haven't seen any examples of it, and I'm fairly sure that if it is possible the following is incorrect:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
        $("#tabs").effect(slide,options,500,callback);
    });
</script>
+2  A: 

You can do something like this, if you want the effect to happen when you change tags using the fx option:

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

A fade + slide would be like this:

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

This applies the effects to the tabs themselves, you can take it for a spin here.

Nick Craver
That is sort of what I was going for, but more along the lines of what localscroll allows you to do.I'm attempting to replace a rather bulky jquery coda-slider-like device with this.Where did you find the information on the FX? Nothing I've found so far has been all that helpful.
VikingGoat
@VikingGoat - The jQuery UI site itself is pretty good: http://jqueryui.com/demos/tabs/#option-fx There's also the actual documentation site here: http://docs.jquery.com/UI/Tabs#options
Nick Craver
@Nick: As usual...you rock man!!!
Raja
After some experimentation I've managed to get the effects to work with the tabs but only one of the tabs is mysteriously working.It can be seen (played with) here http://jsfiddle.net/p5VGj/32/
VikingGoat
@VikingGoat - IDs have to be unique :) Here's a updated example using `class=""` http://jsfiddle.net/p5VGj/33/
Nick Craver
*blink* But I did that, and it wasn't working, Oh Come on >_<Well at least it works now XD
VikingGoat