CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sunny Sandeep
Sunny Sandeep

Reputation: 1011

how to show two div one by one repeatedly

i am working on developing on an Html page where i have two div. In each div i have one image. I want that each image should be visible for 2 second and after that the second div should get visible. This function should get repeatedly. For this i used following code.

<script type="text/javascript">
 $( document ).ready(function() {
     $(".logo-outer").show();
     setTimeout(function () {
         $(".logo-outer").hide();
         $(".logo-outernew").hide();
     }, 2000);
 });
 </script>

But the above code is not working and image in not visible or invisible.

Upvotes: 2

Views: 1124

Answers (8)

Lungelo Nzimande
Lungelo Nzimande

Reputation: 1

You can simply change display for one div to none and use the following code it will hide and show 

<script>
    $(document).ready(function(){
      setInterval(function(){
      $("div.logo-outer, div.logo-outernew").toggle(1000);
     }, 3000)
   });
</script>

Upvotes: 0

Radhesh Vayeda
Radhesh Vayeda

Reputation: 901

Remove the console and un-comment the lines with hide and show function

     var time_to_display = 2000;
        var img1 = setInterval(function () {
        console.log("Img1");
        //          $(".logo-outer").hide();
          //      $(".logo-outernew").show();
           
                }, time_to_display * 2); 
                
        setTimeout(function(){
        var img2 = setInterval(function () {
        console.log("Img2");
            //       $(".logo-outernew").hide();
             //    $(".logo-outer").show();
                }, time_to_display * 2); 
        },2000);

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

function swapImage() {
                $('.img02').fadeOut();
                $('.img01').fadeIn();
                setTimeout(function () {
                    $('.img02').fadeIn();
                    $('.img01').fadeOut();
                }, 2000);
                setTimeout(function () {
                    swapImage();
                },4000)
            }
            $(document).ready(function () {
                swapImage();
            });
.img01,
            .img02{
                width: 200px;
                height: 200px;
                position: absolute;
            }
            .img01{
                background: green;
            }
            .img02{
                background: red;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img01"></div>
<div class="img02" style="display: none;"></div>

Upvotes: 0

user5014677
user5014677

Reputation: 694

 setInterval(function () {
     if ($(".logo-outer").css("display") == "none"){
        $(".logo-outer").show();
     }
     else{
        $(".logo-outer").hide();
     }
 }, 2000);

Every 2seconds it runs the functions and if logo outer is not visible it will show it, else if it's visible it will hide it.

Upvotes: 1

4b0
4b0

Reputation: 22323

By default hide your 2nd div and inside setTimeout hide your 1st dive and show your second div.

  $(".logo-outer").show();
  $(".logo-outernew").hide();
     setTimeout(function () {
         $(".logo-outer").hide();
         $(".logo-outernew").show();
     }, 2000);
.logo-outer {
    background:red;
    width: 50vw;
    height: 50vw;
}
.logo-outernew {
    background:green;
    width: 50vw;
    height: 50vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-outer">
    <h1>1 div</h1>
</div>
<div class="logo-outernew">
    <h1>2 div</h1>
</div>

Upvotes: 0

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

You can use the modulo (e.g. % sign) operator with a global variable to determine when hide or show your divs.

var count = 0;
$( document ).ready(function() {
    $(".logo-outer").show();
    setTimeout(function () {
        if(count % 2 == 0) {
            $(".logo-outer").hide();
            $(".logo-outernew").show();
        } else {
            $(".logo-outer").show();
            $(".logo-outernew").hide();
        }
        count++;
    }, 2000);
 });

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176896

you can make use of SetInterval function instead of timeout function

below is example code , it might now working please check proper function . main point is make use of interval function 

var myInterval = setInterval(function () {
      if($(".logo-outer").is(':visible'))
       {
             $(".logo-outer").hide();
             $(".logo-outernew").show();
       }
       else
       {
             $(".logo-outer").show();
             $(".logo-outernew").hide();
       }
        },2000);

if you want to stop clearInterval(myInterval);

Upvotes: 5

Emayla
Emayla

Reputation: 53

I believe that you have also made an error in hiding the second image insted of displaying it (inside setTimeout):

     $(".logo-outer").hide();
     $(".logo-outernew").hide();

I believe the second one should be $(".logo-outernew").show();?

Upvotes: 0

Related Questions