Delay for toggleClass?

Question

I worked up this simple script which opens and closes the header/banner section when the button is clicked. One of the changes is the buttons apperance/class.

Here is the whole script:

 $('.closeBtn').on('click', function(e) {
      $('.site-header').toggleClass("openHeader closeHeader");
      $('.closeBtn').toggleClass("closeBtn1 openBtn1");
      $('.closeDivider').toggleClass("closeDivider1 closeDivider2");
      $('.CloseBtnWrap').toggleClass("CloseBtnWrap1 CloseBtnWrap2");
      e.preventDefault();
    });

However I want to add a delay to THIS portion of the script:

 $('.closeBtn').toggleClass("closeBtn1 openBtn1"); //you can list several class names

So right now when you click the button it switches the class. However I would like to add a half second delay before the switch actually happens.

I found this code but failed when applying it to my current code. toggleClass with delay

Kinda a novice. Thanks!

Here is my CSS if you need it.

  .CloseBtnWrap{
    width:100%;
    height:61px;
    position:absolute;
    margin-top: -61px;
    z-index:5;
  }
  .CloseBtnWrap1{
    margin-top: -61px;
  }
  .CloseBtnWrap2{
    margin-top: -2px;
  }
  .closeBtn{
    width:203px;
    height:44px;
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/close-top-btn.png?17190220414767002292");
    background-repeat: no-repeat;
    position:absolute;
    margin-top:16px;
    margin-left:-102px;
    left:50%;
    cursor: pointer;
    z-index:1;
  }
  
    .closeBtn1{
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/close-top-btn.png?17190220414767002292");
    margin-top:16px;
  }
  
    .openBtn1{
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/open-top-btn.png?12561607923280938330");
    margin-top: 0px;
  }

  .closeDivider{
    width:100%;
    height:13px;
    background-image: url("https://cdn.shopify.com/s/files/1/1388/2543/t/2/assets/top-divider.png");
    background-repeat: repeat-x; 
    position:absolute;
    margin-top:48px;
  }
  .closeDivider1{
    margin-top:48px;
  }
  .closeDivider2{
    margin-top:0px;
  }
  
  .openHeader{
   margin-top: -25px; 
     transition: all .8s;
    -o-transition: all .8s;
    -moz-transition: all .8s;
    -webkit-transition: all .8s;
  }
  .closeHeader{
   margin-top: -648px;
     transition: all .8s;
    -o-transition: all .8s;
    -moz-transition: all .8s;
    -webkit-transition: all .8s;
  }

Did you see [this answer](http://stackoverflow.com/a/35434614/615754) in the question you linked to? Use `setTimeout()`. — nnnnnn, Nov 01 '16 at 06:23
I wasnt actually sure what those did. The original example I learned this from had it and I didnt know where they went. Thanks! — Patrick, Nov 01 '16 at 06:24
Also, I guess `.delay` can be used. ``$('.closeBtn').delay(1000).toggleClass("closeBtn1 openBtn1"); — Rajesh, Nov 01 '16 at 06:35
*"I wasnt actually sure what those did."* -`e.preventDefault()` prevents whatever the default behaviour for the event is from happening, e.g., for a click event on an anchor it would prevent the navigation. Assuming you want to prevent that behaviour then you just need `e.preventDefault()` once, anywhere in the function (a lot of people make it the first line). You can also put it inside an `if` statement if you only want to prevent the default if some condition is true. — nnnnnn, Nov 01 '16 at 06:36

Iññoceñt Ùšmâñ · Answer 1 · 2016-11-01T07:15:04.250

3

Try this

    setTimeout(function(){
     $('.closeBtn').toggleClass("closeBtn1 openBtn1");

   },500)

UPDATED

You can change close/open Button Class On toggleClass Callback

 $('.site-header').toggleClass('openHeader closeHeader',
  500).promise().done(function(){

         $('.closeBtn').toggleClass("closeBtn1 openBtn1");
   });

edited Nov 01 '16 at 07:15

answered Nov 01 '16 at 06:24

Iññoceñt Ùšmâñ

316
1
6
16

Putting the `e.preventDefault()` in the timeout won't work. (I know the OP said they want those two lines delayed, and really they don't need to call `.preventDefault()` four times, but anyway...) – nnnnnn Nov 01 '16 at 06:26
Where should i put the prevent default code? Also this example isnt working. It changes what happens for sure. Let me get you a before and after video example. Will you be available in 10 min? – Patrick Nov 01 '16 at 06:30
you can not see the half second delay you should increase the time – Iññoceñt Ùšmâñ Nov 01 '16 at 06:36
The problem is it does delay it but not how I want. This is my original code and the live example of its effect https://www.youtube.com/watch?v=qTWkohmc7WQ&feature=youtu.be You will notice when I click the "Close top" button. The button immediately changes its background image and position to "Open top" Your code still switches the background immediately but stays in place for some reason. https://www.youtube.com/watch?v=GEBzllTg7TM&feature=youtu.be Thanks! – Patrick Nov 01 '16 at 06:46
My goal is for the button to switch about midway of the banner opening/or/closing – Patrick Nov 01 '16 at 06:47
I am adding my css to my question. – Patrick Nov 01 '16 at 06:49
When i use your updated example I get no errors however nothing changes and it acts as my original code acted and still changes to the next button styles instantly with no delay – Patrick Nov 01 '16 at 07:30
Change this $('.site-header').toggleClass('openHeader closeHeader', 500).promise() to $('.site-header').toggleClass('openHeader closeHeader', 1500).promise() – Iññoceñt Ùšmâñ Nov 01 '16 at 07:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127085/discussion-between-portalp-and-innocent-usman). – Patrick Nov 01 '16 at 07:35

Delay for toggleClass?

1 Answers1