首页 » 水哥专栏 » jQuery 多元素串行动画

jQuery 多元素串行动画

jQuery 可以很方便地给元素集合(选择符选出的元素)指定一系列动画,因为它的核心动画方法 animate 基于其内部实现的动画队列。但通常,一次性地给一个元素集合指定动画后,各成员元素的动画都是一同进行的。若有“一个接一个依次进行”的需求呢?

在此,我们先基于网上对此屈指可数的解答中提到的“animate 方法的 complete 回调参数”来实现一个【元素集合串行动画】——

(function ($) {

    var iNO = 0, $_Animate, iCallback;

    function iAnimate($_Element, iArgument) {
        var This_Func = arguments.callee;

        $.fn.animate.apply($_Element, [].concat(iArgument, function () {
            if (++iNO < $_Animate.length)
                This_Func($_Animate.eq(iNO), iArgument);
            else iCallback.call(this);
        }));
    }

    $.fn.iAnimate = function () {
        $_Animate = this;
        var iArgument = $.makeArray(arguments);
        if (typeof iArgument[iArgument.length - 1] == 'function')
            iCallback = iArgument.pop();

        iAnimate($_Animate.eq(iNO), iArgument);

        return this;
    };

})(self.jQuery);

上述封装方法的参数格式与“原生 animate”完全相同。

【参考文档】

  1. http://www.cnblogs.com/dolphinX/p/3330174.html
  2. http://zhidao.baidu.com/question/412851030(思路正确,但误解了 jQuery next 方法的含义,失去了普适性)