延迟 toggleClass 动作答案

【问题标题】：Delay the toggleClass action延迟 toggleClass 动作
【发布时间】：2022-01-19 15:27:50
【问题描述】：

我有一个标签，一旦我点击它，标签就会淡入。内容通过 AJAX 加载。动画完成后，我想加载内容。现在，当我单击按钮时，内容会立即加载。我试过toggleClass with delay，但没用。

如何延迟加载内容？这是 HTML：

$("#button-1").on("click", function() {
  $(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
  $(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})

#modal-1 {
  width: 33.33%;
  height: 100vh;
  background-color: green;
  left: 0;
  top: 0;
}

.modals {
  transition-timing-function: ease-out;
  transition-duration: 1000ms;
  position: absolute;
}

.active {
  width: 100vw !important;
  height: 100vh !important;
}

.show-hidden-content {
  display: block !important;
}

.hidden-content-1 {
  display: none;
}

.hide-shown-content {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
  <div class="hidden-content-1">
    <h1> TEST </h1>
  </div>
  <div class="main-page-content-1">
    <h1>TEST </h1>
  </div>
  <a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
  </a>
</div>

【问题讨论】：

不能将input 放入a，它们都是交互元素，HTML 禁止嵌套它们。
$(".hidden-content-1",2000) 毫无意义。 jQuery/$ 的第二个参数是 context，它需要是 DOM 元素、文档、jQuery 对象或选择器。 2000 两者都不是。
.toggleClass("show-hidden-content", 2000) 也没什么意义。第二个参数是一个布尔值，表示应该添加还是删除该类。
我尝试了延迟切换类 - 您是否在该问题的答案中注意到您必须拥有jquery-ui？您的问题中没有证据表明您包含 jquery-ui。
您链接到的问题提供了 jquery-ui 答案和使用 setTimeout 的答案 - 我们无法添加更多内容。

标签： html jquery css

【解决方案1】：

看起来你看起来像：

$('#button-1').on('click', function () {
  setTimeout(() => {
    $('.hidden-content-1').toggleClass('show-hidden-content');
    $('.main-page-content-1').toggleClass('hide-shown-content');
  }, 2000);
});

【讨论】：

【解决方案2】：

您可能想要使用动画延迟

#target {
    animation: fade-in 250ms ease-out 1s 1 normal both running;
}

@keyframes fade-in {
    0% {
        opacity:0;
    } 100% {
        opacity:1;
    }
}

【讨论】：