So I have the following ul
HTML
<div class="atividades">
<ul>
<li">Agência Funerária</li>
<li>Funerais</li>
<li>Cremações</li>
<li>Trasladações</li>
<li>Tanatopraxias</li>
<li>Exumações</li>
<li>Artigos Religiosos</li>
<li>Atendimento 24h</li>
</ul>
</div>
CSS
div.atividades {
position: absolute;
z-index:120;
top: calc(50% - 40px);
left:calc(50% - 250px);
width: 500px;
padding: 0;
}
div.atividades ul{
width:100%;
}
div.atividades ul li{
display:none;
position:absolute;
width:100%;
vertical-align:middle;
text-align:center;
font-size:50px;
}
.ativa {
/*efeito*/
}
And the following jQuery that allows me to make every li
appear in sequence. That is, add the first and the second appears. So on and on!
<script>
$(document).ready(function(e) {
var li = $("div.atividades li.ativa");
var first = $(".div.atividades ul li:first");
first.show();
function addcls() {
li.hide().removeClass("ativa");
li = li.next();
if (!li.length){ //se passou o ultimo
li = first; //volta ao primeiro
}
li.show().addClass("ativa");
};
setInterval(addcls, 3000);
});
</script>
My goal now is to make a CSS
or JQuery
that when li appears, it will gain the following effect:
It appears with fade-up
(bottom up) and comes up, gives a stop of about 3 seconds and then gives a fade-down
(top down).
Similar to link
If the function is m CSS
, the class .ativa
that is still empty is already created
How to do this?