gpt4 book ai didi

javascript - 在 jquery 中编写一个全局动画队列

转载 作者:行者123 更新时间:2023-11-29 10:49:47 25 4
gpt4 key购买 nike

使用 jQuery 向单个 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'); // <----

但是请注意,现在这只能用于动画。您可以将它与任何返回 promise 对象的 jQuery 方法一起使用,例如 .ajax、.post、.get、.getJSON 等,如果您像最初那样使用它的话。

关于javascript - 在 jquery 中编写一个全局动画队列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12675275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com