How can I delay a plugin execution from a callback?

I've written a lightweight jquery plugin to manage tab switching, it's worked well in development and testing. I've had an odd requirement for one of the tabs to expand in height on opening and then contract the height on closing. The changes are required to be an animation, the opening is easily done using a callback that fires when the tab switching is complete.

I can't however get the closing animation to work, this is due to the plugin continuing and hiding the tab before the animation i开发者_JAVA技巧s complete.

Is there anyway I can force the plugin to pause until a callback function is complete?

The code I'm using to fire the callback is

if($.isFunction(params.click)){
    params.click.apply(this,[content,tab,set]);
};

I don't really want to go down the road of managing animations in the plugin

---

If you plugin knows which tab is currently "open" then the opening of a new tab is happening at the same time as the closing of another tab.

Thus if you have the power to call a callback function provided by the client code, for the opening of a new tab, you would surely need to call a "closing" callback on the previously open tab?

---

Create a callback for both the opening and closing of tabs, such that whenever a user changes the tab the tabOpening event is fired for the new tab, and the tabClosing event is called for the old tab.

Be specific in your documentation as to which will occur first to make using your plugin easy! Assuming that tabClosing would fire first you could then write client code as follows:

var $closingTab = null,
    $openingTab = null;

$('#target').yourPlugin({
    tabClosing: function(tab) {
        $closingTab = $(tab);
    },
    tabOpening: function(tab) {
        $openingTab = $(tab);
        // Animate the 
        $closingTab.animate({}, 1000, function() {
            $openingTab.animate({}, 1000);
        });
    }
});

Or more simply, but less primitively you could have a tabChange callback which could ecapsulate the whole event:

$('#target').yourPlugin({
    tabChange: function(oldTab, newTab) {
        $(oldTab).animate({}, 1000, function() {
            $(newTab).animate({}, 1000);
        });
    }
});