我有一个推荐部分。推荐书是通过自定义帖子类型创建的,并使用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>
答案 0 :(得分:0)
使用div和数据属性上的类,这是一个非常简单的方法。我在michigan.gov/mipage上用一个名为Wow js的jquery插件做了这个 - &gt; https://wowjs.uk/。 这是设置延迟的一种方法,你可以在循环时将这个数字上下调整,这样每个人都会淡入...也可以设置它不会触发直到它们滚动...
该网址可能没有动画,因为该网页预计会在下个月左右更新。
希望这有帮助。
答案 1 :(得分:0)
如果你真的想使用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>