CODEWITHSUNDEEP
javascriptloopsweb
Halfpint
Halfpint

Reputation: 4077

Javascript fade in multiple elements

In my custom Wordpress theme I am trying to animate all my table "nodes" in as the page loads simultaneously.

I can get this animation to work by applying the animation to each element individually but since trying to automate this process the animation fades all my nodes in at the same time and I do not understand why.

The below code generates my nodes...

    <div class="span12 news-tiles-container">
    <div class="row span12 news-tiles-inner">
        <?php 
            $node_id = 1;
            $node_size_id = 1;
         ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();  ?>
            <?php 
                if($node_size_id > 3) {
                    $node_size_id = 1;
                }
            ?>

            <a href='<?php the_permalink(); ?>'>
                <div class='node node<?php echo $node_id ?> size<?php echo $node_size_id ?>' 
                     style='background-image: url(<?php the_field( 'thumbnail' ); ?>);'>
                            <div id="news-caption" class="span12">
                                <p class="span9"><?php the_title(); ?></p>
                                <img class="more-arrow" src="<?php bloginfo('template_directory'); ?>/images/more-arrow.png" alt="Enraged Entertainment logo"/>
                            </div>
                </div>
            </a>

            <?php
                $node_size_id++;
                $node_id++;
             ?>

        <?php endwhile; endif; ?>
    </div>
</div>

And I am using the following code to control there animate in

$(document).ready(function(){

// Hide all of the nodes
$('.node').hide(0);

// Local Variables
var node_id = 1;
var nodes = 10;
var i = 0;


    while(i <= nodes)
    {
        $('.node'+node_id).hide(0).delay(500).fadeIn(1000);

        node_id+=1;
        nodes--;

    } });

I assume it is something to do with my while loop, but the node counter increments successfully so it should be applying the animation to node1 then node2 then node3 and so on.

Thanks in advance Alex.

Upvotes: 0

Views: 244

Answers (3)

Alnitak
Alnitak

Reputation: 339917

Here's a generic plugin that will perform any animation you want, in sequence, on a jQuery collection of elements:

(function ($) {
    $.fn.queueEach = function (func) {
        var args = [].slice.call(arguments, 1); // array of remaining args
        var els = this.get();                   // copy of elements
        (function loop() {
            var el = els.shift();
            if (el) {
                $.fn[func].apply($(el), args).promise().done(loop);
            }
        })();
        return this;
    }
})(jQuery);

Usage:

$('.node').queueEach('fadeIn', 'slow');

Working demo at http://jsfiddle.net/alnitak/D39Cw/

Upvotes: 2

omma2289
omma2289

Reputation: 54639

Probably not as elegant, but still works:

$(document).ready(function(){
    $('.node').hide();
    $('.node').each(function(index,elem){
        setTimeout(function(){$(elem).fadeIn(1000);},1000*index);
    });
});

jsFiddle here

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15376

Use your brandy dandy .fadeQueue(): working jsFiddle

$.fn.fadeQueue = function(){
    $(this).fadeIn(function(){
        if(!$(this).is(':last-child')) // making sure we are not done
            $(this).next().fadeQueue();
    });
}

This will wait for the callback of .fadeIn() for each div before moving to the next one..

Upvotes: 1

Related Questions