Toggleclass with Delay

toggleClass with delay

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>

Toggle class with delay on click

As said in the comments you are looking for .setTimeout() instead. And as per your comment below, you want to toggle .nav-bar-logo, you can do like this:

jQuery('.menu-button').click(function() {
  window.setTimeout(function() {
    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');
  }, 500);
});

Here is a little DEMO

jQuery('.menu-button').click(function() {  window.setTimeout(function() {    jQuery('.nav-bar-logo').toggleClass('nav-bar-logo-active');  }, 500);});

.nav-bar-logo {  padding: 50px;  background: red}
.nav-bar-logo-active {  background: green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button class="menu-button">  toggle button</button><div class="nav-bar-logo">  I'm going to change color when button toggled</div>

jquery toggleclass delay time

A toggleClass accepts following parameters

( className [, switch ] [, duration ] [, easing ] [, complete ] )

So delay can be added like this

$(this).toggleClass('click',2000);

where the number 2000 is the duration which determine how long the animation will run.

Toggle class with delay on hover

let timers = [], open = false;
$('.menu > li').hover(function() {  if (this.dataset.timer) {    timers.forEach(t => clearTimeout(t));    clearTimeout(parseInt(this.dataset.timer));    delete this.dataset.timer;    open = false;  } else if ($(this).hasClass('reveal')) {    this.dataset.timer = setTimeout(() => {      $(this).removeClass('reveal');      delete this.dataset.timer;      open = false;    }, 1000);    open = true;  } else if (open) {    timers.push(setTimeout(() => {      $('.menu > li').removeClass('reveal');      $(this).addClass('reveal');    }, 1000));  } else {    $('.menu > li').removeClass('reveal');    $(this).addClass('reveal');  }});

.submenu {  display: none;}
.menu > li.reveal ul {  display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="menu">  <li>    <a href="#">Link lv1</a>    <ul class="submenu">      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>    </ul>  </li>  <li>    <a href="#">Link lv1</a>    <ul class="submenu">      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>    </ul>  </li>  <li>    <a href="#">Link lv1</a>    <ul class="submenu">      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>      <li><a href="#">Link lv2</a></li>    </ul>  </li></ul>

Toggle Class sequentially

To do what you require you can use fadeToggle() with an incremental delay on each .pops element in the set.

This can also be extended to reverse the order of the fade when hiding the elements on successive clicks:

$('.desplegable').click(function() {
  var $pops = $(this).parent().find('.pops').stop();      
  if ($pops.eq(0).is(':visible'))
    $pops = $($pops.get().reverse());
    
  $pops.each((i, el) => $(el).delay(100 * i).fadeToggle(300)); 
});

.pops { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="desplegable">Title</div>
  <div class="pops">Element 1</div>
  <div class="pops">Element 2</div>
  <div class="pops">Element 3</div>
</div>

onclick toggle class with delay adjustment

Never used jquery but this should work, not sure if its the cleanest solution.

    $(document).ready(function() {      $(".button").click(function() {        if($(".search").hasClass("hide"))        {           window.setTimeout(function() {               $(".search").toggleClass("hide");           }, 250);        }   else $(".search").toggleClass("hide");      });    });

.hide {  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button class="button" type="button">nav</button><div class="search"><input type="text" placeholder="Search"></div>

Is it possible to add a delay to the remove class part of toggleClass only?

For Simple Time Delay while converting from green to red

$(".container").click(function(){
   var $element = $(this);

   //check if element has green class --> remove green class with a delay
   if ($element.hasClass('green')) {
     var delay = 1000; //ms
     setTimeout(function(){
         $element.removeClass('green');
     },delay );
   }
   // element doesn't have green class --> add it
   else {
     $element.addClass('green');
   }
});

fiddle

jQuery delay between each toggleclass

Consider this following code:

$('.menuitem').each(function(i) { 
    var elm=$(this);
    setTimeout(function() { 
        elm.toggleClass('show');
    }, i * 250); 
});

See it in action, in this demo i have hiding diving one by one and delay is 1000 ms.

---

Related Topics