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和数据属性上的类，这是一个非常简单的方法。我在michigan.gov/mipage上用一个名为Wow js的jquery插件做了这个 - ＆gt; https://wowjs.uk/。这是设置延迟的一种方法，你可以在循环时将这个数字上下调整，这样每个人都会淡入...也可以设置它不会触发直到它们滚动...

该网址可能没有动画，因为该网页预计会在下个月左右更新。

希望这有帮助。

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/

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

2 个答案: