Applying effects to jquery-ui tabs

14,462

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.

Share:
14,462
VikingGoat
Author by

VikingGoat

Updated on June 14, 2022

Comments

  • VikingGoat
    VikingGoat almost 2 years

    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>