Animations - jQuery - fadeInUp with delay

Question

I have a set of posts that I'm trying to fadeInUp one by one. They are in masonry in my actual example, so this would give the effect of them locking together. Like the posts here essentially: https://undsgn.com/uncode/blog/blog-full-width-masonry/

So for the example I've put together a JSFiddle: enter link description here

Which contains:

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

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

CSS:

.elementor-post {
  padding:20px 30px;
  display:inline-block;
  text-align:centre;
  background:red;
}

jQuery:

jQuery('.fade-in-post-container .elementor-post').addClass('animated fadeInUp');

So, as you can probably see, I'm using the .css library Animate.css and I'm using jQuery to find an element and apply the requires .animate .effect classes to it.

This works great so far, but as you can see from the JSFiddle they all fade in at once, instead of one by one and interlocking...

I thought about utilising this somehow:

.each(function(i) {
jQuery(this).delay(250 * i)

Which would be OK if I could use jQuery animations perhaps? But I guess this might just apply the class to the elements one at a time, I tried it, and it doesn't work...

I've also tried creating the whole effect with jQuery fadeIn or Animations, but I'm finding it really difficult to find a workable solution...

score 2 · Accepted Answer · answered Sep 12 '18 at 16:36

2

May be this is what you want..

jQuery('.fade-in-post-container .elementor-post').each(function(i) {
    setTimeout(()=>{$(this).addClass('animated fadeInUp')}, 250 * i);
});

https://jsfiddle.net/4zwgymu7/

answered Sep 12 '18 at 16:36

Nimitt Shah

4,477
2
10
21

If you do not want to show all boxes at start you can use this jsfiddle.. https://jsfiddle.net/4zwgymu7/2/ – Nimitt Shah Sep 12 '18 at 16:39
Thanks so much Nimitkumar Shah thats perfect! Just what I was looking for!! Theres one point however, heres where I'm applying it: http://staging.morningsidepharm.com/news-blog/ As you'll see they don't quite lock into each other. After the animation finishes, if you resize the window only a little but, the posts then do lock into each other... Any ideas why this is happening? :) – Shaun Taylor Sep 12 '18 at 16:53
I am not able to find the code in your website.. so cant help.. if you can share the code or jsfiddle then it would help me – Nimitt Shah Sep 12 '18 at 17:16
No worries, Nimitkumar Shah - I'm not sure I can replicate it in JSFiddle as the actual masonry layout is build inside the Elementor page builder. I'll see if there's anything I can figure out - Thanks again :) – Shaun Taylor Sep 13 '18 at 11:49

Animations - jQuery - fadeInUp with delay

1 Answers1