Help with using JS delay or setTimeout

Asked

Viewed 411 times

1

I’m trying to create a loop function that switches between 2 Divs. But the result is that when restarting the function, I cannot make it wait again the 5 seconds of the alternation interval, generating a visual result wrong.

Follows the function:

$(document).ready(function(){
        ciclos();
        function ciclos(){
            $(".slide:first-child").fadeIn(1000).delay(5000).fadeOut(1000);
            $(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000);
            setTimeout(ciclos, 5000);
        }
    })
javascript jquery html css

  • I answered this once... Check it out: https://answall.com/questions/192594/tabela-sempre-ativa-ajax-e-php/192631#192631

  • Is your setTimeout time correct? After 5 seconds it will call the cycles function again without caring about the times you put in the fadein, fadeOut and delay. Besides, setTimeout should be used in a callback, when the effect you wanted is over. I mean, you made a mix of timers there that I don’t think will work.

  • These numbers don’t close at all!

  • Actually, I saw that the times were wrong, but even correcting, the time after a few cycles starts to get wrong. I wanted the function ciclos() was called after the last fadeOut, as if it were: $(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000).ciclos();

1 answer

5


If you want two animations in different elements to be done in sequence you have to call one in the completion function of the other.

If we have the excitement fadeIn of a <p> and we want after this to make a fadeIn in a <h1> we would have to do the fadeIn of <h1> in the callback(function running when the animation completes) of the fadeIn of <p>, thus:

$("p").fadeIn(1000, function(){ //quando o fadeIn do p termina executa esta função
     $("h1").fadeIn(1000);
});

Transposing this logic to your example would have to change it to be like this:

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);
      });
   });
}

Example working (reduced times to be easier to see that it works):

$(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>

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.