jQuery, using .queue() to cascade CSS toggleClass()

I have many many elements that I need to toggle the css class of on user click.The transitions all happen at once and hence is very slow: I want the transition from classes properties to happen one after the other after a small delay, like you would with an animate() callback. Since removeClass(), addClass() & toggleClass() don't have callbacks, I have been struggling to make that work.

I have looked here and on the jquery doc, but I am still confused.

Any ideas would be appreciated.

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++;

    }
}

Answers


I might be misinterpreting what you want, but...

If you include the JQuery UI library, the .toggleClass() function can be used like .animate() with a delay and a callback.

Then you can do something like this:

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

If you don't really care if the class is animated, but just want a delay between the toggling of the different elements, you can use setTimeout instead. (In this case you don't need to include the JQuery UI library).

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


Need Your Help

Database in use error with Entity Framework 4 Code First

sql entity-framework code-first ef-code-first

I have an MVC3 and EF 4 Code First application, which is configured to change the DB when the model changes, by setting the DB Initializer to a DropCreateDatabaseIfModelChanges&lt;TocratesDb&gt;, w...

How to find out that my Windows user is a domain user?

c# active-directory

I need find out that my windows currentuser is domain user or local user?