Time between jQuery add/remove class

Home

Tools

Blog

Questions

Profile

footer text

Time between jQuery add/remove class

How can I set a timer, 10 sec in between this?

addClass('loading').removeClass('loading')

This is the full code

$("#loadmore").click(function() {
    cap += 10;
}).bind('click', loadfeed).addClass('loading').removeClass('loading');

Thank you.

Comments:

2023-01-07 20:29:48

Wouldn't you want to remove the loading class after loadfeed has completed whatever it is doing, rather than after an arbitrary number of seconds?

Answers(4) :

Use setTimeout. Also not sure why you are binding to click twice in two different ways... so with those two changes it'd look something like this:

$("#loadmore").click(function() {
    cap += 10;
    loadfeed();
    $(this).addClass("loading");
    that = this
    setTimeout(function() {
        $(that).removeClass('loading');
    }, 10000)
});

You can use the jQUery delay() method and create a new queue item to do the act of removing the class.

$("#loadmore").click(function () {
    cap += 10;
    loadfeed();
}).addClass("loading").delay(10000).queue(function(){
    $(this).removeClass("loading");
    $(this).dequeue();
});

If you don't like this, the setTimeout() solution that @jcmoney provided is awesome.

Comments:

2023-01-07 20:29:48

beat me to the answer by 18 secs :)

2023-01-07 20:29:48

@bcm... sorry :) but I guess someone doesn't like it :/

2023-01-07 20:29:48

AFAIK addClass() and removeClass() don't use the jQuery queue system, so delay() won't work alone here. In order to use delay(), you need to manually add the removeClass() to the queue using queue().

2023-01-07 20:29:48

@Hristo Sure thing. It would be nice if delay() worked for arbitrary function calls in a jQuery chain, but at least there's a way to work around it. :)

2023-01-07 20:29:48

@Xenethyl... maybe in a future version of jQuery :) anyway, learned something new. this is a good day!

$(document).ready(function() {                      
  $('.letsGo').click(function() { 
    $('.footerCta').addClass('ball');  
    setTimeout(function() {
        $('.footerCta').removeClass('ball');
    }, 1000)
  });
});

Comments:

2023-01-07 20:29:48

Your answer could be improved by adding more information on what the code does and how it helps the OP.

jQuery how to remove an added class after a certain time, jQuery how to animate buttons

Javascript
// after 100ms of adding in order to animate the button
// in this example I'm animating a button using jquary 

// initially I have selected the button that I want to animate

// You can chose any selector you wand ether HTML tag or a class or an id 

var buttonPressed = $("#blue")



// Next I added the CSS class that I have already crated in my 

// CSS style sheet

buttonPressed.addClass(".pressed");



// This is the part where i removed the addded class
// after 100ms of adding in order to animate the button
setTimeout(function() {

buttonPressed.removeClass(".pressed");

}, 100);

.pressed {

box-shadow: 0 0 20px white;

background-color: grey;

}

this is the CSS class I have applied in this example.

Questions & Answers