jQuery: run css related method AFTER previous css method is completed

Question

I am doing the following through jQuery, but it looks like they are almost happening simultaneously.

Is there a way to make sure itemNameContainer.removeClass('NoDisplay') in the complete callback to run only after the loadingContainer.addClass('NoDisplay') is completed?

Visually, it looks like I am seeing 'Please wait..' and the item name show up at the same time..

function onToggleItemCompletionStatus(currentItem) {
    var itemId, toggle = !currentItem.Completed,
        loadingContainer, itemNameContainer;
    itemId = currentItem.ItemId;
    loadingContainer = $('#loading_' + itemId);
    itemNameContainer = $('#name_' + itemId);

    $.ajax({
        beforeSend: function (xhr, settings) {
            loadingContainer.removeClass('noDisplay');
            itemNameContainer.addClass('noDisplay');
        },
        complete: function (xhr, textStatus) {
            loadingContainer.addClass('noDisplay');
            itemNameContainer.removeClass('noDisplay');
        },
        data: {
            accessToken: aToken,
            listId: currentGroceryList.Id,
            itemId: currentItem.ItemId,
            completed: toggle
        },
        dateType: 'json',
        error: function (xhr, textStatus, errorThrown) {
            $.publish(customEvent.ItemToggledFail, [currentItem]);
        },
        success: function (data, textStatus, xhr) {
            var success = data.success;

            if (success) {
                $.publish(customEvent.ItemToggledSuccess, [currentItem]);
            } else {
                $.publish(customEvent.ItemToggledFail, [currentItem]);
            }
        },
        type: 'POST',
        url: actionUrls.toggleItemCompletionStatus
    });
}

EDIT I pasted the actual function to give a better idea

Nothing is jumping out at me...is the request synchronous or asynchronous? Can you post the rest of the $.ajax call? Is the response just arriving very quickly? — Jonathon Faust
– Jonathon Faust, Commented Jan 28, 2011 at 0:20
They should be performed in a matter of microseconds, so a callback isn't given. There is no after CSS applied hook that I know of. You could be hacky with setTimeout(), but I often don't recommend it. — alex
– alex, Commented Jan 28, 2011 at 0:20
I guess everything is just happening in a matter of microseconds.. — Abe
– Abe, Commented Jan 28, 2011 at 0:43

alex · Accepted Answer · 2011-01-28 00:21:28Z

2

Not that I know of, but you could try...

loadContainer.fadeOut(300, function() {
   itemNameContainer.removeClass('NoDisplay');
});

answered Jan 28, 2011 at 0:21

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abe Over a year ago

Thanks. I think this approach makes the transition appear smoother. It's not perfect, but everything is happening in a matter of microseconds anyway.

Collectives™ on Stack Overflow

jQuery: run css related method AFTER previous css method is completed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related