jQuery，使用 .queue() 级联 CSS toggleClass()

Question

我有很多元素需要在用户点击时切换css类。所有转换都同时发生，因此非常慢：我希望类属性的转换在一个小延迟后一个接一个地发生，就像你对animate()回调所做的那样。自removeClass()年以来，addClass() & toggleClass()没有回调，我一直在努力做到这一点。

我已经看过这里和jquery文档，但我仍然感到困惑。

任何想法将不胜感激。

JSFiddle在这里。

$(".vanilla").click(function () {
colorThread(this);
});

function colorThread(clickedMsg) {
itemId = $(clickedMsg).attr('id');
pointerForward = itemId;
pointerBackward = itemId - 1;
classList = clickedMsg.classList;
classList = classList[0];
idArray = $('.' + classList)
.map(function () {
return this.id;
});

while (pointerForward < idArray.length || pointerBackward >= 0) {
var xF = $('#' + idArray[pointerForward]);
var xB = $('#' + idArray[pointerBackward]);
var theQueue = $({});
theQueue.queue("transition", function (next) {
xF.toggleClass("vanilla-red");
next();
}).dequeue("transition").queue("transition", function (next) {
xB.toggleClass("vanilla-red");
next();
}).delay(200).dequeue("transition");
pointerBackward--;
pointerForward++;
}
}

Answer 1

我可能误解了你想要什么，但是...

如果包含 JQuery UI 库，则可以像.animate()一样使用.toggleClass()函数，但有延迟和回调。

然后你可以做这样的事情：

$(".vanilla").click(function () {
colorThread($(this));
});
function colorThread($div) {
$div.toggleClass('vanilla-red', 100, function () {
(function togglePrev($div) {
$div.toggleClass('vanilla-red', 100, function () {
togglePrev($div.prev());
});
})($div.prev());
(function toggleNext($div) {
$div.toggleClass('vanilla-red', 100, function () {
toggleNext($div.next());
});
})($div.next());
});
}

斯菲德尔

如果您并不真正关心类是否是动画的，而只是希望在不同元素的切换之间保持延迟，则可以改用setTimeout。(在这种情况下，您不需要包含 JQuery UI 库)。

function colorThread($div) {
$div.toggleClass('vanilla-red');
setTimeout(function () {
(function togglePrev($div) {
$div.toggleClass('vanilla-red');
setTimeout(function() {
togglePrev($div.prev());
}, 100);
})($div.prev());
(function toggleNext($div) {
$div.toggleClass('vanilla-red');
setTimeout(function() {
toggleNext($div.next());
}, 100);
})($div.next());
}, 100);
}

斯菲德尔