Search jQuery

jQuery Forum

Loop not working.

in Getting Started • 9 years ago

Hi, folks. I'm trying to make an animation loop till the end of times, but i'm not reaching success in the way i'm writing the script. Hope you take a look and help me to figure out a way to make it work.

The html is this:

<div id="elementosPrimeiros">
<div class="elemento pincel">
<img src="../Imagem/pincel_lapis.jpg" />
<div class="descricaoElemento">
<h4>Boa Aparência</h4>
<h5>Design direcionado e de qualidade.</h5>
</div>
</div>
<div class="elemento mais">
<img src="../Imagem/mais.png" />
</div>
<div class="elemento regua">
<img src="../Imagem/regua.jpg" />
<div class="descricaoElemento">
<h4>Funcionalidade</h4>
<h5>Precisão no desenvolvimento e nos resutados.</h5>
</div>
</div>
</div>
<div id="elementosSegundos">
<div class="elemento igual">
<img src="../Imagem/igual.png" />
</div>
<div class="elemento solucao" >
<img src="../Imagem/lampada.jpg" />
<div class="descricaoElemento">
<h4>Solução</h4>
<h5>É disso que estamos falando.</h5>
</div>
</div>
</div>

And the script:

$(document).ready(function () {
$(".elemento").hide();
$(".descricaoElemento").hide();
function firstElement() {
$(".pincel").fadeIn('600', function () {
$(".pincel div").slideDown('fast', function () {
$(".mais").delay('400').fadeIn('800', function () {
$(".regua").delay('400').fadeIn('600', function () {
$(".regua div").slideDown('fast', function () {
$("#elementosPrimeiros").delay('1000').fadeOut('fast', secondElement);
});
});
});
});
});
}
function secondElement() {
$('.igual').fadeIn('fast', function () {
$(this).delay('400').fadeOut('slow', function () {
$('.solucao').fadeIn('slow', function () {
$('.solucao div').slideDown('slow', function () {
$('#elementosSegundos').delay('2000').fadeOut('slow', firstElement);
});
});
});
});
}
firstElement();
});

You noticed that it is an animation composed by two stages, the fisrtElement and the secondElement. What happens is that in the last callback of the firstElement, it calls the secondElement, and than the other way around. But, after the ending of the secondElement, the firstElement does not restart again.