Estou criando a tela de um sistema que vai mostrar uns gráficos e vai ser exibidos em um TV. Existe duas class uma .tela-01 e outra chamada .tela-02 que esta com display:none. Gostaria que ficasse alterando entre essas duas telas a cada 10 segundos, os exemplos que achei na internet só funciona uma única vez, assim que carrega a tela.
Seria basicamente um if
alternando as duas div
s com .hide
e .show()
usando 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>
<div class="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>
Uma forma sem 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>
<div class="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>