如何使用jQuery一次在每个帖子中淡入

Question

我有一个证词部分。这些推荐是通过自定义邮政类型创建的，并使用foreach循环被称为。现在，所有帖子都在"证明"部分中显示。

我如何一次显示单个帖子有效的淡出或以下帖子中的EF幻灯片。

这是我的推荐部分页面：

<div class="sup_testimonial_section sup_testimonial_section2 sup_toppadder100 sup_bottompadder100">
        <div class="sup_overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
                    <div class="sup_testimonial_heading">
                        <h3>What Our Client Say</h3>
                    </div>
                </div>
                 <?php foreach ( $testimonialsposts as $post ) { setup_postdata( $post ); 
                 ?>
                 <div class="fade-one">
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
                    <div class="sup_testimonial_detail">
                        <p><?=get_post_meta($post->ID, 'content', true);?></p>
                        <span><?=$post->post_title?></span>
                    </div>
                </div>
                </div>
                <?php  wp_reset_postdata(); } ?>
                </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

使用DIV和数据属性上的类进行此操作的超级简单方法。我在密歇根州。有一种设置延迟的方法，当您循环循环时，您可以将其上下划分，以便每个秒数逐渐消失...也可以将其设置为不要触发，直到它们滚动...

如果该页面计划在下个月左右更新。

希望这会有所帮助。

Answer 2

如果您真的想使用jQuery，则可以做这种类型的事情。假设.fade-one显示为none。您可以尝试一下：

<?php
foreach( $testimonialsposts as $post ) {
    setup_postdata( $post ) ?>
    <div class="fade-one">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
            <div class="sup_testimonial_detail">
                <p><?=get_post_meta($post->ID, 'content', true);?></p>
                <span><?=$post->post_title?></span>
            </div>
        </div>
    </div>
    <?php  wp_reset_postdata();
} ?>
<script>
$(document).ready(function() {
    // Start increment
    var i = 1;
    // Loop through each block
    $.each($('.fade-one'),function(k,v) {
        // multiply increment and fade in
        $(v).delay(500*i).fadeIn();
        // Increment
        i++;
    });
});
</script>

演示：https：//jsfiddle.net/kjzve8m1/