Hide and show div after a certain time

Question

Hide and show div after a certain time

Navigation

#1 by (1 votes)

1

I'm creating the screen of a system that will show graphics and will be displayed on a TV. There are two class one .tela-01 and another called .tela-02 that is with display: none. I would like it to change between these two screens every 10 seconds, the examples I found on the internet only work once, so I loaded the screen.

jquery html5 css

asked by anonymous 01.05.2018 / 00:04

1 answer

Is there a way to customize the function alert equal to the input required? How do I get a list of JS objects in Controller C # MVC?

score 1 · Accepted Answer

It would basically be if alternating the two div s with .hide and .show() using setInterval :

$(document).ready(function(){
   setInterval(function(){
      
      if($(".tela-01").is(":visible")){
         $(".tela-01").hide();
         $(".tela-02").show();
      }else{
         $(".tela-02").hide();
         $(".tela-01").show();
      }
      
   }, 10000);
});

.tela-02{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>

A form without if :

$(document).ready(function(){
   setInterval(function(){

      var tela = "[class^='tela-']:";

      $(tela+"visible").hide("fast", function(){
         $(tela+"hidden")
         .not(this)
         .show();
      });
      
   }, 10000);
});

.tela-02{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>