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”完全相同。
【参考文档】
- http://www.cnblogs.com/dolphinX/p/3330174.html
- http://zhidao.baidu.com/question/412851030(思路正确,但误解了 jQuery next 方法的含义,失去了普适性)