Delay the toggleClass action-CodePudding

I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.

How can I delay the content from being loaded in? This is the 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" >
  <div >
    <h1> TEST </h1>
  </div>
  <div >
    <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>

CodePudding user response：

It seems you are looking something like:

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

CodePudding user response：

You might want to use animation-delay

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

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