使用自定义jQuery动画时的.done（）回调

Question

I'm using the following functions in order to animate slides just like slideUp() or slideDown() :

(function($) {    
    jQuery.fn.slideLeftHide = function(speed, callback) {
      this.animate({
        width: "hide",
        paddingLeft: "hide",
        paddingRight: "hide",
        marginLeft: "hide",
        marginRight: "hide"
      }, speed, callback);
    }

    jQuery.fn.slideLeftShow = function(speed, callback) {
      this.animate({
        width: "show",
        paddingLeft: "show",
        paddingRight: "show",
        marginLeft: "show",
        marginRight: "show"
      }, speed, callback);
    }
})(jQuery);

The thing is, that i want to call a function only once after the animation ends. I tried doing this by:

$(".item").slideLeftHide(function() {
    $(this).remove();

}).done(function() {
    $(".tab").each(function() {
        $(this).attr('data-status', 'success');
    });
});

When I execute this code, I get an error message saying Cannot read property 'done' of undefined . The same happens with .then() instead of .done() .

How can I solve this?

Thanks!

Answer 1

(function ($) {
    function slideLeftBinder(action) {
        return function () {
            var i = 0,
                speed = ((Number(arguments[i]) === parseFloat(arguments[i]) && !isNaN(arguments[i])) || undefined) && arguments[i++],
                callback = (typeof arguments[i] === 'function' || undefined) && arguments[i++],
                self = this;

            return new Promise(function (resolve) {
                var completed = 0;

                self.animate({
                    width: action,
                    paddingLeft: action,
                    paddingRight: action,
                    marginLeft: action,
                    marginRight: action
                }, {
                    duration: speed,
                    complete: callback,
                    always: function() {
                        if (self.length === ++completed) {
                            resolve(self);
                        }
                    }
                });
            });
        };
    }

    jQuery.fn.slideLeftHide = slideLeftBinder('hide');
    jQuery.fn.slideLeftShow = slideLeftBinder('show');
})(jQuery);

Use it like this:

$(".item")
    .slideLeftHide(function() {
        $(this).remove();
    })
    .then(function(selector) {
        console.log('selector: ', selector);
        $(".tab").attr('data-status', 'success');
    });