jQuery UI 1.9选项卡中的多个show（）和hide（）效果

Question

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!

Answer 1

@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 } .

Answer 2

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.