Javascript 推迟上课？

我编写了这个简单的脚本，当点击按钮时，它会打开和关闭标题/横幅部分。其中一个变化是按钮外观/类别

以下是整个脚本：

 $('.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();

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

我找到了此代码，但将其应用于当前代码时失败。

有点像新手。 谢谢

---

这是我的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;
  }

试试这个

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

   },500)

已更新

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

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

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

---

为什么你有这么多的

e.preventDefault（）

？你在链接的问题中看到了吗？使用

setTimeout（）

。我不确定这些都做了什么。我从最初的例子中学到这一点，但我不知道他们去了哪里。谢谢另外，我想可以使用

.delay

``$（'.closeBtn'）.delay（1000）.toggleClass（“closeBtn1-openBtn1”）；“我不确定它们到底做了什么。”——

e.preventDefault（）

防止事件的默认行为发生，例如，对于锚上的点击事件，它会阻止导航。假设您想要防止这种行为，那么您只需要在函数中的任何位置（许多人将其作为第一行）执行一次

e.preventDefault（）。如果只想在某些条件为真时阻止默认值，也可以将其放入
if
语句中。将
e.preventDefault（）
放入超时将不起作用。（我知道OP说他们希望这两行代码延迟，实际上他们不需要调用
.preventDefault（）
四次，但无论如何……）我应该把prevent默认代码放在哪里？这个例子也不起作用。它肯定会改变发生的事情。让我给你一个前后视频的例子。你10分钟后有空吗？你看不到半秒的延迟。你应该增加时间。问题是它确实会延迟，但不是我想要的方式。这是我的原始代码，当我单击“Close top”（关闭顶部）按钮时，您会注意到它的效果。该按钮会立即将其背景图像和位置更改为“打开顶部”。您的代码仍然会立即切换背景，但由于某些原因会保持不变。谢谢我的目标是让按钮在横幅打开/或关闭的中途切换