Search code examples
jqueryjquery-uijquery-ui-tabsjquery-effects

Applying effects to jquery-ui tabs

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>
Solution

  • 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.