jquery - 在jquery插件中添加done()函数以等待动画完成

Question

我的问题是当我添加:

.done(function() {
  innerDef.resolve();                    
});

在“动画”功能中，它没有按我想要的方式工作。
我只想让函数等待动画完成，如下所示:

$('#anim_vision').showThis().done(function(){
   alert('task finished!');
});

我的完整插件代码:

(function ($) {

    $.fn.extend({    
        showThis: function (options) {    
            var def = $.Deferred();

            var options = $.extend(options);
            var deferredList = [];

            this.each(function () { 
                var innerDef = $.Deferred();
                deferredList.push(innerDef.promise());

                $( this )
                .children('.texto')
                .removeClass('opacity_none')
                .css('display','block');

                $( this )
                .animate({'height':'100%'}, 900, 'easeOutQuad')
                .done(function() {
                    innerDef.resolve();                    
                });
                });

            $.when.apply($, deferredList).done(function() {
               def.resolve(); 
            });

            return def.promise();
        }
    });
})(jQuery);

我真的需要帮助，拜托!

Answer 1

常规 jQuery 对象没有 .done() 方法。您需要调用 .promise() 通过更改以下内容来获取动画的 Promise 对象:

            .animate({'height':'100%'}, 900, 'easeOutQuad')
            .done(function() {
                innerDef.resolve();                    
            });

对此:

            .animate({'height':'100%'}, 900, 'easeOutQuad')
            .promise()
            .done(function() {
                innerDef.resolve();                    
            });

但是，您可以直接使用 Promise 来简化事情，而不用创建自己的 innerDef。

<小时/>

进一步简化事情，您也不需要自己进行延迟，因为您只需从 $.when() 返回 promise 即可:

(function ($) {

    $.fn.extend({    
        showThis: function (options) {    
            var options = $.extend(options);
            var promiseList = [];

            this.each(function () { 

                $( this )
                    .children('.texto')
                    .removeClass('opacity_none')
                    .css('display','block');

                // run the animation,
                // get a promise object for the animation queue,
                // put it in our list of promises
                promiseList.push(
                     $( this )
                     .animate({'height':'100%'}, 900, 'easeOutQuad')
                     .promise()
                );
            });

            // return a new promise that is resolved 
            // when all the animations are done
            return $.when.apply($, promiseList);
        }
    });
})(jQuery);

<小时/>

经过进一步研究，您可以将其进一步简化为:

jQuery.fn.extend({    
    showThis: function () {    
        return (this
          .children('.texto')
          .removeClass('opacity_none')
          .css('display','block')
          .animate({'height':'100%'}, 900, 'easeOutQuad')
          .promise()
        );
    }
});

进一步更改:

1. 您调用的所有 jQuery 方法都已迭代整个集合，因此您无需使用 this.each() 手动迭代它们。
2. 您没有使用 options 参数，因此您可以将其删除。
3. 您没有任何持久状态变量，因此不需要围绕它的函数包装器来隔离它们。
4. jQuery 的 .promise() 会在整个集合完成动画处理后进行解析，以便它为您完成这项工作。您不需要自己的 $.when() 或自己的 Promise 数组。您只需返回 .animate() 之后的 .promise() 即可，当所有动画完成时它将解析。

您可以观看此演示，了解 .promise() 如何等待整个集合完成动画处理:http://jsfiddle.net/jfriend00/Erq5Q/ .