Se quer que duas animações em elementos diferentes sejam feitas em sequência tem de chamar uma na função de completar da outra.
Se tivermos a animação fadeIn
de num <p>
e queremos após essa fazer um fadeIn
num <h1>
teríamos que fazer o fadeIn
do <h1>
no callback(função que corre quando a animação completa) do fadeIn
do <p>
, assim:
$("p").fadeIn(1000, function(){ //quando o fadeIn do p termina executa esta função
$("h1").fadeIn(1000);
});
Transpondo esta logica para o seu exemplo teria que o alterar para que ficasse assim:
function ciclos(){
$(".slide:first-child").fadeIn(1000).delay(5000).fadeOut(1000, function(){
//esta segunda animação agora é apenas chamada quando a primeira termina
$(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000, function(){
//o timeout é agora só chamado quando a segunda animação termina
setTimeout(ciclos, 5000);
});
});
}
Exemplo a funcionar (reduzi os tempos para ser mais fácil de ver que funciona):
$(document).ready(function(){
ciclos();
function ciclos(){
$(".slide:first-child").fadeIn(1000).delay(2000).fadeOut(1000, function(){
$(".slide:nth-child(2)").
delay(1000).fadeIn(1000).delay(3000).fadeOut(1000, function(){
setTimeout(ciclos, 4000);
});
});
}
})
.slide {
width:300px;
height:200px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >
<img class="slide" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
<img class="slide" src="https://c2.staticflickr.com/4/3899/14383431886_8f0675cf95_b.jpg">
</div>
ciclos()
fosse chamada depois do ultimofadeOut
, como se fosse:$(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000).ciclos();