I have, for example, 3 titles. I want that 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 a code the following:
<div>
<h1>TEXTO DE EXEMPLO 1</h1>
<h1>TEXTO DE EXEMPLO 2</h1>
<h1>TEXTO DE EXEMPLO 3</h1>
</div>
You can also do this with CSS only.
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 redundant to set visibility and opacity to @keyframes ... however an element with visibility: hidden can not be clicked, while one with opacity: 0 can ... on the other hand, it is not possible to apply a transition effect (aka fade-in / fade-out) with visibility , but it is possible with opacity .
In the above example, the effect of fade is desirable and does not trigger an event by clicking on an invisible <h1>
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><divid="event_toggle">
<h1>TEXTO DE EXEMPLO 1</h1>
<h1>TEXTO DE EXEMPLO 2</h1>
<h1>TEXTO DE EXEMPLO 3</h1>
</div>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 break in 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.
Example interrupted in jsfiddle.
<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>