CODEWITHSUNDEEP
javascriptjquerycsswordpresscss-animations
Shaun Taylor
Shaun Taylor

Reputation: 972

Animate in each card of an masonry blog archive page

I have a masonry blog archive here: http://staging.morningsidepharm.com/news-blog/

It's in Wordpress and used a page builder plugin to build it called Elementor.

I've been trying to find ways to fade in each 'card' one by one. he posts seem to be structured like so: 

<div class="elementor-posts-container">
 <article class="elementor-post"></article>
 <article class="elementor-post"></article>
 <article class="elementor-post"></article>
 <article class="elementor-post"></article>
</div>

So I enqueued a .js file into my Wordpress install, and inside the file called additional.js I added the following code: 

$(".elementor-post").each(function(i) {
    $(this).delay(100 * i).fadeIn(500);
});

I also tried this: 

function fadeLI(elem, idx) {
    elem.eq(idx).fadeIn(500, function() {
        fadeLI(elem, (idx + 1) % elem.length);
    });
}

fadeLI($(".elementor-post"), 0);

I believe I have to replace the $ in the first example with jQuery, so I tried that also.

I added the following CSS for the div: 

.elementor-post { 
  display: none; 
}

The only thing all of this seems to do is display:none; the elementor-post divs

Being Wordpress, I did assume jQuery is there an active, I've seen it in the resources list in my browser... so I'm not entirely sure where I'm going wrong.

Any help would be greatly appreciated.

Upvotes: 0

Views: 119

Answers (1)

cgdannie
cgdannie

Reputation: 158

In WordPress jQuery uses the no conflict mode. This means, that you need to use always jQuery instead of $.

If I try this with your first example, it works: 

jQuery(".elementor-post").each(function(i) {
    jQuery(this).delay(100 * i).fadeIn(500);
});

But in my tests, I needed to disable all posts with the css selector .elementor-posts .elementor-post.

You should in this example call your function only, when the elements are fully loaded. You can achieve this by enqueueing the additional.js script in the footer of the page:

wp_enqueue_script('additional-js', get_template_directory_uri() . '/additional.js', array( 'jquery' ), false, true);

Or you can wrap the function inside a jQuery(document).ready() function. This has the benefit, that you can pass jQuery as an $ to everything inside this function:

jQuery(document).ready(function($){
    // you can use $ here

    $(".elementor-post").each(function(i) {
        $(this).delay(100 * i).fadeIn(500);
    });

});

Upvotes: 1

Related Questions