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循环有关，但节点计数器成功递增，因此它应该将动画应用于node1，然后是node2，然后是node3，依此类推。

提前致谢亚历克斯。

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/

的工作演示

Answer 2

使用您的白兰地花花公子.fadeQueue()：working jsFiddle

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

这将等待每个div的.fadeIn()回调，然后转移到下一个..

Answer 3

可能不那么优雅，但仍然有效：

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

jsFiddle here

Javascript淡入多个元素

3 个答案: