toggleClass with delay

Question

In this stackoverflow post the accepted answer claimed that it is possible to use toggleClass with a delay. But i did not find any information about a delay parameter on the official jquery API website.

I tried it but there is no delay after a click on the div.

$("div#test").click(function() {
    $(this).toggleClass('light', 2000).toggleClass('dark', 2000);
});

div {
  border: 1px dashed black;
}
.light {
  background-color: white;
}
.dark
{
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="light" id="test">
    <p style="color:red">click here</p>
</div>

It's part of jQueryUI, not jQuery. There's even a link in the answer to the docs: http://jqueryui.com/toggleClass/ — Rory McCrossan, Feb 16 '16 at 13:56

score 5 · Answer 1 · answered Feb 16 '16 at 14:01

5

You can perform this operation with a basic timeout function :

$("div#test").click(function () {
    var el = $(this);
    window.setTimeout(function() {
        el.toggleClass('light').toggleClass('dark');
    }, 2000);
});

This is more efficient than a jQuery feature ;)

answered Feb 16 '16 at 14:01

Tmb

450
12
20

Thanks for your answer, it works but unfortunattely there is no fading. https://jsfiddle.net/dzzk8oxu/1/ – Black Feb 16 '16 at 14:05
@EdwardBlack The fading animation should be set in your css (see http://stackoverflow.com/questions/4411306/css3-transition-of-background-color for example) – Tmb Feb 16 '16 at 14:21

score 3 · Accepted Answer · answered Feb 16 '16 at 14:01

That's happening because the delay behavior is added by the jQuery UI library.

You're using only the jQuery library in your example.

jQuery website

jQuery UI website

Your example works if you include jQuery UI:

$("div#test").click(function() {
  $(this).toggleClass('light', 2000).toggleClass('dark', 2000);
});

div {
  border: 1px dashed black;
}

.light {
  background-color: white;
}

.dark {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="light" id="test">
  <p style="color:red">click here</p>
</div>

score 2 · Answer 3 · edited Sep 15 '17 at 12:48

2

The .delay() method allows you to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue, only subsequent events in a queue are delayed. for example this will not delay the no-arguments forms of .toggleClass() or .show() or .hide() which do not use the effects queue.

edited Sep 15 '17 at 12:48

parik

2,313
12
39
67

answered Sep 15 '17 at 12:23

Masood

1,545
1
19
30

score -2 · Answer 4 · answered Feb 16 '16 at 14:00

-2

Use it like this:

$("div#test").click(function() {
    $(this).delay(2000).toggleClass('light').toggleClass('dark');
});

answered Feb 16 '16 at 14:00

Atif Tariq

2,650
27
34

1

Don't post an answer before testing it yourself. – Masood May 25 '18 at 11:46

toggleClass with delay

4 Answers4

Linked