如何在容器中隐藏一类DIV，以及如何在同一容器中隐藏另一个div？使用jQuery

debugcn 发表于 Dev

詹姆斯·奥杜罗

我有一个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并在一个函数中递增，并显示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"-->