Question

我编写了这个简单的脚本，在单击按钮时打开和关闭标题/横幅部分。其中一个变化是按钮apperance / class。

以下是整个脚本：

 $('.closeBtn').on('click', function(e) {
      $('.site-header').toggleClass("openHeader closeHeader"); //you can list several class names 
      e.preventDefault();

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

      $('.closeDivider').toggleClass("closeDivider1 closeDivider2"); //you can list several class names 
      e.preventDefault();
      $('.CloseBtnWrap').toggleClass("CloseBtnWrap1 CloseBtnWrap2"); //you can list several class names 
      e.preventDefault();
    });

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

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

所以现在当你点击按钮时它会切换课程。但是我想在切换实际发生之前添加半秒延迟。

我发现此代码但在将其应用于我当前的代码时失败了。 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");
   });

toggleClass的延迟？

1 个答案: