CODEWITHSUNDEEP
javascriptjqueryhtmlcss
james oduro
james oduro

Reputation: 37

How can I hide a class of DIV in a container and how another div in the same container? Using jQuery

I have a class of DIV which is about 10 in number in a container.I want to hide and show them one bye one after every 15 seconds with a nice fadeOut() or bounce. I think the fade will be ok. Please help Using jQuery.

The is my HTML code: 

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

Upvotes: 2

Views: 87

Answers (3)

sammyukavi
sammyukavi

Reputation: 1511

Add some css.

.advertcont{
    display:none;
}

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

Then some 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);

            });
        });

Find it here https://jsfiddle.net/njueukavi/3exn83ct/

Upvotes: 1

anpsmn
anpsmn

Reputation: 7257

You can have a counter set to 0 and increment in a function and show the divs and use setTimeout to call the function repeatedly.

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

Upvotes: 1

Hitesh Siddhapura
Hitesh Siddhapura

Reputation: 1392

See below simple solution

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

Upvotes: 1

Related Questions