0

在我的自定义 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 等等。

提前感谢亚历克斯。

4

3 回答 3

2

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/

于 2013-07-06T21:20:46.700 回答
1

使用你的白兰地花花公子.fadeQueue()：工作 jsFiddle

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

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

于 2013-07-06T20:19:24.487 回答
1

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

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

jsFiddle在这里

于 2013-07-06T20:23:59.177 回答