Delay Removing a Class in Jquery

Delay Removing a Class in Jquery

You can use setTimeout() function:

Calls a function or executes a code snippet after specified delay.

$(document).ready(function () {
   var $rows = $("#rowone.one, #rowtwo.three, #rowthree.two").addClass("pageLoad");

   setTimeout(function() {
       $rows.removeClass("pageLoad");
   }, 800);
});

Using delay() with removeClass()

You can easily accomplish that with a setTimeout:

var myItem = $(this);

myItem.addClass("uk-form-danger");
setTimeout( function(){ myItem.removeClass("uk-form-danger"); }, 5000 );

jQuery: Can I call delay() between addClass() and such?

You can create a new queue item to do your removing of the class:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

Or using the dequeue method:

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

The reason you need to call next or dequeue is to let jQuery know that you are done with this queued item and that it should move on to the next one.

How to add class delay or remove class execute in behind add class div?

The delay() method only works with jQuery animation queue so it won't make any delay on addClass() method. To adding class after 1 second you can use setTimeout method.

setTimeout(() => $(this).addClass('slide-clip') , 1000);

why can't I delay addClass and removeClass using jquery?

You can, but you need to queue()

$("#form_editor").addClass('abcd').delay(3200).queue(function() {  $(this).removeClass('abcd');});

.abcd:before{  content:"abcd";  background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="form_editor">efgh....</div>

Jquery Add class on mouse over and remove it with delay

Inside the setTimeout the context of this is different. In that case you can use the arrow function () as shown in example two or use .bind to bind the scope to the current context

$(".result").hover(  function() {    $(this).addClass("current");  },  function() {    setTimeout(function() {      $(this).removeClass("current");    }.bind(this), 800)  });
// with arrow function
$(".result2").hover(  function() {    $(this).addClass("current2");  },  function() {    setTimeout(() => {      $(this).removeClass("current2");    }, 800)  });

.current {  color: red;}
.current2 {  color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='result'> I am the result </div>
<div class='result2'> I am the result2 </div>

Removing a class with delay()

Try with .delay()

$(function () {
    $('.box1').click(function () {
        $('.Wrapper').addClass('clicked1').stop().delay(2000).queue(function () {
            $(this).removeClass('clicked1')
        })
    });
});

Demo: Fiddle

or using setTimeout()

$(function () {
    $('.box1').click(function () {
        $('.Wrapper').addClass('clicked1');
        setTimeout(function(){
            $('.Wrapper').removeClass('clicked1');
        }, 2000)
    });
});

Demo: Fiddle

jQuery - how to remove a class from an element with a given delay?

fadeOut will fade the entire element out and hide it from the screen. If you want to fade the effects of the class, you can use jQuery UI .removeClass() (which accepts a time duration and fade effect, unlike regular jQuery) or CSS3 transitions.

jQuery add remove class on list with a delay in between

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
    }, 1000);
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}

or

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
        setTimeout(function () {
            recursive(++i % f.length)
        }, 2000);
    }, 1000);
}

UPDATE: fiddle here: https://jsfiddle.net/robbyn/9ya46tj4/

delay or wait 3s then remove class class

Use setTimeout() instead of the delay. That is a regular JS function:

setTimeout(function(){    $('.class1').not(".class2").removeClass("pulse");}, 3000);

---

Related Topics