CODEWITHSUNDEEP
jquerydelay
user2586455
user2586455

Reputation: 601

Add a class using jQuery after a delay

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?

Upvotes: 7

Views: 11211

Answers (6)

Talha Ahmed Khan
Talha Ahmed Khan

Reputation: 15433

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

Upvotes: 0

dominic
dominic

Reputation: 143

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/

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

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);
});

Upvotes: 0

Parv Sharma
Parv Sharma

Reputation: 12705

you need to dequeue

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

as mentioned here

Upvotes: 4

Anton
Anton

Reputation: 32581

You need to use .stop()

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

DEMO

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

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');
});

Upvotes: 10

Related Questions