-1

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" 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>
j08691
  • 204,283
  • 31
  • 260
  • 272
YLN
  • 1
  • 1
  • You can not put `input` into `a`, they are both interactive elements, and HTML forbids nesting those. – CBroe Dec 16 '21 at 14:35
  • `$(".hidden-content-1",2000)` makes no sense whatsoever. The second parameter for `jQuery`/ `$` is `context`, and that needs to be a DOM Element, Document, jQuery object or selector. `2000` is neither of those. – CBroe Dec 16 '21 at 14:37
  • `.toggleClass("show-hidden-content", 2000)` also makes little sense. The second parameter is a boolean, saying whether the class should be added or removed. – CBroe Dec 16 '21 at 14:38
  • *I tried toggleClass with delay* - did you note in the *answer* to that question that you have to have [tag:jquery-ui]? There's no evidence in your question that you've include jquery-ui. – freedomn-m Dec 16 '21 at 14:46
  • 1
    The question you linked to provides both a jquery-ui answer and an answer using `setTimeout` - there's not much more we can add. – freedomn-m Dec 16 '21 at 14:47

2 Answers2

0

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);
});
Narek Ghazaryan
  • 2,758
  • 1
  • 7
  • 11
0

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;
    }
}
Slev7n
  • 343
  • 3
  • 14