CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Zach
Zach

Reputation: 1185

Multiple show() and hide() effects in jQuery UI 1.9 Tabs

Before jQueryUI 1.9, I was able to use the following to toggle both the opacity and height at the same time:

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

Now that it was noted in the upgrade guide that fx is deprecated and to use the show() and hide() methods instead -- I can't figure out how to pass two effects to it. I've tried:

show: [{effect: "opacity"}, {effect: "slideToggle"}]

to no avail. Any pointers? Thanks as always!

Upvotes: 1

Views: 1697

Answers (2)

Adrian
Adrian

Reputation: 11

@Zach I know this is rather old, but I had the same issue and I just wanted to confirm that you were on to something.

You can indeed build your own effect:

$.fn.slideFadeToggle  = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

and use it like this show: { effect: "slideFadeToggle", duration: 500 }.

Upvotes: 1

Kevin B
Kevin B

Reputation: 95022

It is explained pretty well i think in the documentation.

$( ".selector" ).tabs({ show: { effect: "slide", duration: 800 } })

However, i don't see how you could make that both slide AND fade given the new api.

Upvotes: 0

Related Questions