我有一类DIV，它在容器中的数量大约是10个。我想隐藏并在每15秒后用一个漂亮的fadeOut（）或弹跳一个一个地再显示它们。我觉得褪色会好的。请帮助使用jQuery。
这是我的HTML代码：
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
答案 0 :(得分：1)
您可以将计数器设置为0并在函数中递增并显示divs并使用setTimeout重复调用该函数。
var ctr = 0;
$(document).ready(function(){
showElem();
});
function showElem() {
var length = $('.advertcont').length;
$('.advertcont').hide();
$('.advertcont').eq(ctr).fadeIn(900);
(ctr >= (length-1)) ? ctr = 0: ctr++;
setTimeout(showElem, 1000); //make it 15000. Have used 1000 for the demo
}.advertcont {display: none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
答案 1 :(得分：1)
见下面的简单解决方案
setInterval(function(){
jQuery('.advertcont:visible:eq(0)').fadeOut();
}, 15000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="images/advertimage/lap.png" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
答案 2 :(得分：1)
添加一些css。
.advertcont{
display:none;
}
然后你的HTML
<h1 class="advert"> Spsonsord Links</h1>
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
<div class="advertcont">
<img src="http://placehold.it/350x150" class="advertimg">
<p class="adverttext">Get the Best Shoes at 30GHS.</p>
<a class="advertlink" href="#">www.shoes.com</a>
</div> <!--end of div clas "ADVERTCONT"-->
</div><!--end of div clas "CONTAINER"-->
然后是一些jquery
$(function() {
$(".advertcont").each(function(index, element) {
setTimeout(function() {
// fade previous element if any existed
if ($(element).prev().hasClass('advertcont')) {
$(element).prev().fadeOut(1000, function() {
$(element).show(1000);
});
} else {
$(element).show(1000);
}
// set timer to index (current iteration of the loop (current element)) * 15 seconds:
}, index * 15000);
});
});