toggleClass的延迟？

Question

我编写了这个简单的脚本，它在单击按钮时打开并关闭标题/横幅部分。更改之一是按钮apperance/class。

以下是整个脚本：

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

但是，我想给脚本的这一部分添加一个延迟：

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

所以现在，当您单击按钮时，它就会切换这个类。但是，在切换实际发生之前，我想添加半秒的延迟。

我找到了这段代码，但在将它应用到当前代码时失败了。toggleClass with delay

算是个新手。谢谢!

这是我的CSS，如果你需要的话。

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

Answer 1

尝尝这个

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

   },500)

更新

您可以在toggleClass回调中更改关闭/打开按钮类

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

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