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

Question

我有一个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"-->

Answer 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"--> 

Answer 2

见下面的简单解决方案

 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"--> 

Answer 3

添加一些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);

            });
        });

在这里找到它https://jsfiddle.net/njueukavi/3exn83ct/