Question

I’ve read a couple of similar cases on Stack Overflow, but not one exactly like mine yet. Here’s the gist of my jQuery plugin:

(function($) {
    var methods = {
        init: function() {
            ...
            $(this).myPlugin("close");
            $(this).myPlugin("open");
        },
        open: function() {
            ...
        },
        close: function() {
            ...
        }
    }
})(jQuery);

The open() and close() methods involve jQuery’s slideUp() and slideDown() methods, so I need to be able to call the close() method and then call the open() method as a callback. However, when I try this solution I have no luck.

Answer 1

For the record, this does not work:

(function ($) {
    "use strict";

    var methods = {
        init: function () {
            return this.each(function () {
                $(this).click(function () {
                    $(this).myPlugin("close", function () {
                        $(this).myPlugin("open");
                    });
                });
            });
        },
        open: function () {
            return this.each(function () {
                console.log("open was called");

                $(this).children(":hidden").slideDown("slow");
            });
        },
        close: function (callback) {
            return this.each(function () {
                console.log("close was called");

                $(this).children(":visible").slideUp("slow");

                callback.call($(window));
            });
        }
    };
}(jQuery));

The code above makes it clear that execution of the script does not wait for the close method to finish before calling the open method in the case of jQuery’s slide animation. Here’s the solution I eventually settled on, using the jQuery promise method:

(function ($) {
    "use strict";

    var methods = {
        init: function () {
            return this.each(function () {
                $(this).click(function () {
                    $(this).myPlugin("toggle");
                });
            });
        },
        toggle: function () {
            return this.each(function () {
                var $openBox = $(this).children(":visible"),
                    $closedBox = $(this).children(":hidden");

                $openBox.slideUp("fast").promise().done(function () {
                    $closedBox.slideDown("fast");
                });
            });
        }
    };
}(jQuery));