Javascript 淡入多个元素

Question

在我的自定义 WordPress 主题中，我尝试在页面同时加载时为所有表格“节点”设置动画。

我可以通过将动画单独应用于每个元素来使该动画工作，但由于尝试自动化此过程，动画会同时淡入所有节点，我不明白为什么。

下面的代码生成我的节点...

    <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>

我使用以下代码来控制动画

$(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--;

    } });   

我认为这与我的 while 循环有关，但节点计数器成功递增，因此它应该将动画应用到节点 1，然后是节点 2，然后是节点 3，依此类推。

提前致谢 亚历克斯。

Answer 1

这是一个通用插件，可以在 jQuery 元素集合上按顺序执行您想要的任何动画:

(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);

用法:

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

工作演示位于 http://jsfiddle.net/alnitak/D39Cw/