jQuery Tabs animations not working

Question

For some reason I can't get any animations to work with my jQuery UI tabs. I've tried many of the examples from here with no success.

Here is how I am laying out my tabs.

<div id="tabs">
    <ul class="tabsHeader">
        <h1>PARTNERSHIPS</h1>
        <li><a href="#tabs-1"><span class="toothIcon"></span>The Benefits</a></li>
        <li><a href="#tabs-2"><span class="avatarIcon"></span>Join Us</a></li>
    </ul>

    <div class="clearfix"></div>

    <div id="tabs-1">
        <div class="content">
            <h1>header</h1>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </div>
    </div>

    <div id="tabs-2">
        <div class="content">
        <p>some text</p>
            <form>
                <input type="text" name="name" placeholder="NAME" />
                <input type="text" name="email" placeholder="EMAIL" />
                <input type="text" name="phone" placeholder="PHONE" />
                <input type="text" name="city" placeholder="CITY OF PRACTICE" />
                <input type="submit" />
            </form>
        </div>
    </div>
</div>

init like so:

$('#tabs').tabs({ fxFade: true, fxSpeed: 'fast' });

or

$( "#tabs" ).tabs({ hide: { effect: "explode", duration: 1000 } });

The tabs work how they are suppose to, but with no animation? Anyone know why?

Answer 1

You are using old API doc. Check this http://api.jqueryui.com/tabs/#option-hide

You need to use hide and show properties to define animations, not fxFade etc.

http://jsfiddle.net/U287r/