Add a class using jQuery after a delay

Question

When an element is clicked, I want to add a class to the body element, but with a slight delay. So, element1 is clicked, then after .5 seconds, the body is a given a new class.

I was using this which works to an extent...

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

However, I have another click event which removes this left-bg class from body.

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});

But then the next time .element1 is clicked, it doesn't apply the left-bg class to the body at all.

Hope that makes sense. Can anybody help me with this or suggest another way of going about it?

Answer 1

Clear the queue:

DEMO

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg').clearQueue();
    });
});

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});

Answer 2

you need to dequeue

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg');
        $(this).dequeue()
    });
});

as mentioned here

Answer 3

You need to use .stop()

$('.element1').click(function() {
    $('body').stop().delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

DEMO

Answer 4

use this -

var bgch;
$('.element1').click(function() {
    bgch = setTimeout((function(){$('body').addClass('left-bg');}),500);
});
$('.another-element').click(function() {
    $('body').removeClass('left-bg');
    clearTimeout(bgch);
});

Answer 5

Please keep in mind, that your delay can cause a problem: - pressing element1 - pressing another-element - removing class - adding class after delay

To ensure all is working fine, you have to keep track of what is going on, as well as you should check if class is already on body-element, so the class is not applied twice:

var bodyClassTracker = 0;
var handledClass = 'left-bg';

$('.element1').click(function() {
    bodyClassTracker = 1;
    $('body').delay(500).queue(function(){
        var eleBody = $('body');
        if (!eleBody.hasClass(handledClass))
            eleBody.addClass(handledClass);
        bodyClassTracker = 0;
        eleBody.clearQueue();
    });
});

$('.another-element').click(function() {
    var removerFun = function(){
            var eleBody = $('body');
            if (eleBody.hasClass(handledClass))
                eleBody.removeClass(handledClass);
            eleBody.clearQueue();
        };
    if (bodyClassTracker == 1)
        $('body').delay(500).queue(removerFun);
    else
        removerFun();
});

Here you can test and demo the code. http://jsfiddle.net/uTShk/3/

Answer 6

You need to stop() the body after setting it.

$('#add').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    }).stop();
});

$('#rem').click(function() {
    $('body').removeClass('left-bg');
});

Fiddle DEMO