jQuery fadeIn and slideUp with delay

Question

Hoping someone can help... I currently have a set of posts/divs inside Wordpress that I have set to fade in one by one using jQuery.

Essentially like these posts here: https://undsgn.com/uncode/blog/blog-boxed-grid?id=index-15588655905&ucat=7 When you click a filter they all fade in and slide up one by one.

I'd like to add to this a slideUp effect, so the slide up and fade in at the same time. I'm struggling to add the second effect and I'm getting unpredictable results.

The code I have so far is as follows:

HTML

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

CSS

.elementor-post {float:left; margin-right:20px;}
.fade-in-post-container .elementor-post { display: none; }

jQuery

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(500 * i).fadeIn(1000);
});

Here's a jsFiddle: https://jsfiddle.net/shan_2000_uk/kugc7m61/16/

I've tried this:

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000).slideUp(1000);
});

and a couple of other things, but I can't seem to get it working properly...

Thanks a lot for taking the time to look.

Answer 1

You can animate without queue (at the same time):

jQuery(this).animate({ opacity: 0 }, { duration: 1000, queue: false });
jQuery(this).animate({ height: 0 }, { duration: 1000, queue: false });

Working code:

$('#run').click(function() {
  $('.fade-in-post-container .elementor-post').animate({ opacity: 1 }, { duration: 4000, queue: false });
  $('.fade-in-post-container .elementor-post').animate({ marginTop: 0 }, { duration: 2000, queue: false });
});

.fade-in-post-container {

}

.fade-in-post-container .elementor-post {
  width: 25%;
  height: 50px;
  display: block;
  margin: 1%;
  border: 1px solid #000;
  float: left;
  margin-top: 300px;
  opacity: 0;
}

#run {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="run">Run effect</button>

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 2

You can possibly do this just with CSS and without jQuery. If the effect below is what you are after. Hope it helps.

body {
  background-color: black;
  margin: 0;
}

.fade-in-post-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
}


.elementor-post {
  position: relative;
  border: 1px solid red;
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

.elementor-post:nth-child(1) {
  animation-delay: 1s;
}

.elementor-post:nth-child(2) {
  animation-delay: 2s;
}

.elementor-post:nth-child(3) {
  animation-delay: 3s;
}

.elementor-post:nth-child(4) {
  animation-delay: 4s;
}

.elementor-post:nth-child(5) {
  animation-delay: 5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 3

i don't know is that exactly whats your looking for but check this jsfiddle example.

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000,function() {
            $(this).delay(250 * i).slideUp(1000)
        });
});