将一系列动画添加到单个 dom 元素非常容易。 jQuery为我很好地将所有内容排队,我基本上不需要做任何事情。
然而,在许多元素上制作一系列动画(例如 pictureDiv 淡出,然后 demographicsDiv 淡入)要困难得多。我写了一个插件类型的东西,让它更容易,如下所示:
var something.createAnimationQueue = function () {
// jQuery queues up animations on each dom element (/ jquery object)
// We want to queue up animations over different dom elements so
// use a jquery object on a blank element
var animationQueue = $({});
return {
add: function (animationFunctionContext, animationFunction) {
var args = $.makeArray(arguments).slice(2);
animationQueue.queue(function (next) {
$.when(animationFunction.apply(animationFunctionContext, args)).done(next)
})
}
}
}
这样用
var animationQueue = something.createAnimationQueue();
animationQueue.add(pictureDiv, pictureDiv.fadeOut, 'slow');
animationQueue.add(demographicsDiv, demographicsDiv.fadeIn, 'slow');
我的问题是:
1)我错过了什么吗?有没有我不知道的更简单的方法。
2)如果没有,有没有办法避免将pictureDiv和pictureDiv.fadeOut传递给animationQueuer?(我试过了,想不出一个)
谢谢!
由于您使用的是 .apply 并重新分配 this
,您可以简单地使用
var animationQueue = something.createAnimationQueue();
animationQueue.add(pictureDiv, $.fn.fadeOut, 'slow');
animationQueue.add(demographicsDiv, $.fn.fadeIn, 'slow');
如果你真的愿意,你可以把它变成一个字符串:
var something.createAnimationQueue = function () {
// jQuery queues up animations on each dom element (/ jquery object)
// We want to queue up animations over different dom elements so
// use a jquery object on a blank element
var animationQueue = $({});
return {
add: function (animationFunctionContext, method) { // <----
var args = $.makeArray(arguments).slice(2);
animationQueue.queue(function (next) {
$.when($.fn[method].apply(animationFunctionContext, args)).done(next) // <----
})
}
}
}
var animationQueue = something.createAnimationQueue();
animationQueue.add(pictureDiv, 'fadeOut', 'slow'); // <----
animationQueue.add(demographicsDiv, 'fadeIn', 'slow'); // <----
但是请注意,现在这不能仅用于动画。你可以将它与任何返回承诺对象的jQuery方法一起使用,例如.ajax,.post,.get,.getJSON等,如果你像最初一样使用它。