CODEWITHSUNDEEP
javascriptjquerydelay
Patrick
Patrick

Reputation: 820

Delay for toggleClass?

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;
  }

Upvotes: 1

Views: 1853

Answers (1)

Iññoceñt Ùšmâñ
Iññoceñt Ùšmâñ

Reputation: 334

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");
   });

Upvotes: 3

Related Questions