How to make elements appear and disappear with Js

Question

I have, like, three titles. I want when the site loads, one appears, then it disappears and the other appears, then the second disappears and the third appears.

You can use as code the following:

<div>
    <h1>TEXTO DE EXEMPLO 1</h1>
    <h1>TEXTO DE EXEMPLO 2</h1>
    <h1>TEXTO DE EXEMPLO 3</h1>
</div>

Answer 1

you can also make this effect only with CSS.

div {
  height: 80px;
}
div h1 {  
  animation-name: exibirOutros;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  position: absolute;
  top: 0px;
}

div h1:nth-child(1) { animation-delay: 0s; }
div h1:nth-child(2) { animation-delay: 2s; }
div h1:nth-child(3) { animation-delay: 4s; }
div h1:nth-child(4) { animation-delay: 6s; }

div h1:nth-child(1) { animation-name: exibirInicial; }
div h1:nth-last-child(1) { animation-name: exibirFinal;}

@keyframes exibirInicial {
  0% { visibility: visible; opacity: 1; }
  75% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes exibirOutros {
  0% { visibility: hidden; opacity: 0; }
  25% { visibility: visible; opacity: 1; }
  75% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

@keyframes exibirFinal {
  0% { visibility: hidden; opacity: 0; }
  25% { visibility: visible; opacity: 1; }
  100% { visibility: visible; opacity: 1; }
}

<div>
  <h1>TEXTO DE EXEMPLO 1</h1>
  <h1>TEXTO DE EXEMPLO 2</h1>
  <h1>TEXTO DE EXEMPLO 3</h1>
  <h1>TEXTO DE EXEMPLO 4</h1>
</div>

It may seem redudante to set the visibility and the opacity in the @keyframes... but an element with visibility: hidden cannot be clicked while one with opacity: 0 can... on the other hand, it is not possible to apply a transition effect (a.k.a fade-in/fade-out) with the visibility, but it is possible with the opacity.

In the above example the effect of fade and does not trigger an event by clicking on a <h1> invisible.

Answer 2

jQuery(document).ready(function(){
  var toggle = function(){
    jQuery('#event_toggle').children().hide();                //  ESCONDE TODOS ELEMENTOS FILHOS
    var current = jQuery('#event_toggle').find('.current');   //  PEGA O ELEMENTO COM CLASS "current" (ATUAL)
    if(!current.length){                                      //  CASO NÃO HAJA UM (PRIMEIRA ITERACAO) PEGA O PRIMEIRO FILHO
      current = jQuery('#event_toggle').children().first();   //  PEGA O PRIMEIRO FILHO ".first()" MANTEM NO OBJETO JQUERY
    }
    current.show();                                           //  EXIBE O ELEMENTO ATUAL

    if(current[0] == jQuery('#event_toggle').children().last()[0]){   //  SE ELEMENTO ATUAL = O ULTIMO ENTAO APENAS GERA 
      setTimeout(function(){                                          //  UMA NOVA ITERACAO PARA ESCONDE
        current.hide();
      },1000)
    }else{                                //  ELEMENTO ATUAL NÃO É O ULTIMO
      if(current.hasClass('current')){    //  SE TIVER A CLASS "current" (NÃO É A PRIMEIRA ITERAÇÃO)
        current.removeClass('current');   //  REMOVE ELA PARA PASSAR AO PROXIMO
      }
      current.next().addClass('current'); //  PASSA A CLASS "current" PARA O PROXIMO ELEMENTO
      setTimeout(toggle, 1000)            //  CHAMA NOVAMENTE A ITERAÇÃO APOS 1s
    }
  };

  setTimeout(toggle, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="event_toggle">
  <h1>TEXTO DE EXEMPLO 1</h1>
  <h1>TEXTO DE EXEMPLO 2</h1>
  <h1>TEXTO DE EXEMPLO 3</h1>
</div>

Study recommendations

setTimeout
jQuery
callback

Answer 3

A simple way to do this is like this:

<div id="el">
    <h1>TEXTO DE EXEMPLO 1</h1>
    <h1>TEXTO DE EXEMPLO 2</h1>
    <h1>TEXTO DE EXEMPLO 3</h1>
</div>

Script:

(function(){
  var el = document.getElementById('el'),
      total = el.children.length, t = 1000, count=0;
     setInterval(function() {
        for (var j=0; j < total; j++) {
            el.children[j].removeAttribute("class");
        }
            el.children[count].setAttribute("class", "active");
            count++;
         if (count == total) {
            count=0;
         }
   }, t);
})();

to interrupt at last:

(function(){
  var el = document.getElementById('el'), total = el.children.length, t = 1000, count=0;
     var interval = setInterval(function() {
        for (var j=0; j < total; j++) {
            el.children[j].removeAttribute("class");
        }
            el.children[count].setAttribute("class", "active");
            count++;
         if (count == total) {
            clearInterval(interval);
         }
   }, t);
})();

Css:

#el h1 {
  display:none;
}
#el h1.active {
  display:block;
}

Continuous example in jsfiddle.

Broken example in jsfiddle.

Answer 4

<html>
<head>
<script src="jquery-2.2.2.min.js">
</script>
<script>

$(document).ready(function(){

$("#bt").click(function(){

$("p").hide();
})

$("#bt1").click(function(){

$("p").show();
})

});
</script>
</head>
<body>

Texo:
<button id="bt"> hide</button>
<button id="bt1">show</button>

<p>
<select id="select" name="marcas" >
<option value="bmw">BMW</option>
<option value="mercedes">mercedes</option>
<option value="toyota">Toyota</option>
</select>
</p>
</body>
</html>