Question

我有很多元素需要切换用户点击的css类。转换一次发生，因此非常慢：我希望从类属性的转换在一小段延迟后一个接一个地发生就像你使用animate()回调一样。由于removeClass()，addClass() & toggleClass()没有回调，我一直在努力做到这一点。

我看过here和jquery doc，但我仍感到困惑。

任何想法都会受到赞赏。

JSFiddle is here.

    $(".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库，.toggleClass()函数可以像.animate()一样使用，但有延迟和回调。

然后你可以这样做：

$(".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());
    });
}

jsfiddle

如果您并不真正关心该类是否已设置动画，但只想在切换不同元素之间出现延迟，则可以使用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);
}

jsfiddle

jQuery，使用.queue（）来级联CSS toggleClass（）

1 个答案: