Divs fade into a loop?

Asked

Viewed 50 times

1

I have the following code I’d like you to do fadeIn and fadeOut after 3 seconds. I thought to use setInterval to loop and then use a setTimeout to give the time that each div was visible. Is there any way to do what I wish? I have something wrong in my code?

setInterval(function(){
    setTimeout(function(){
        $(".emer3").fadeOut("fast");
        $(".emer1").fadeIn("fast");
    }, 3000);

    setTimeout(function(){
        $(".emer1").fadeOut("fast");
        $(".emer2").fadeIn("fast");
    }, 3000);

    setTimeout(function(){
        $(".emer2").fadeOut("fast");
        $(".emer3").fadeIn("fast");
    }, 3000);
}, 9000);



<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" style="margin-top:100px;">
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer1">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer2" style="display:none">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer3" style="display:none">
    252 252 252
  </div>
</div>

Example in this JSFIDDLE

jquery html

  • But what’s the problem with this code? It’s working, if that’s not the effect, it explains a little better, it got a little confused what you want to do.

  • @Anthraxisbr https://jsfiddle.net/nek7xugw/1/ See an example here

  • What is the idea of setInterval? You want to hide it again later?

  • @Sergio O setInterval is supposed to function as an infinite Lopp but is not working as expected

  • But you want to show and then hide? SetTimeout runs 1 time, and why do you want to run it again?

  • Because they are different Ivs, each with a class, and with these setTimeout defines the time that each one gets.

  • You want to blink a wink?

  • @Hudsonph No, I want the div to appear, hold for 3 seconds, disappear and appear the next

  • jquery Fades support complete callbacks to chain animations. That’s what you want to do?

  • @Isac I didn’t quite understand what you said

  • I’m asking if the idea was for the 3 setTimeouts to run one at a time in sequence? Or if the 3 at the same time?

  • @Isac Sequência

Show 7 more comments

1 answer

1


In your code the problem is that all setTimeout start at the same time, so the waiting ends simultaneously.

When you want to chain animations in Jquery you should use the complete function, which is a callback, this way:

$(".umaclass").fadeIn("fast", function(){
    //aqui vem o código a executar quando esta animação acaba
});

If you don’t do it this way then all the Dies for different elements run simultaneously.

For your particular problem of animating Ivs in sequence I suggest another approach, which is even more scalable, building an array of Ivs to animate and animate in sequence based on the position it will.

Example:

const divs = [$(".emer1"), $(".emer2"),$(".emer3")]; //divs a animar
let i = 0; //div corrente

function animar(){
  divs[i].fadeOut("fast"); //fadeout do corrente
  i = (i+1>=divs.length)?0:i+1; //descobrir o proximo
  divs[i].fadeIn("fast", function(){ //fadein do proximo
    setTimeout(() => { animar() } ,3000); //esperar 3 segundos e repetir o processo
  });
}

setTimeout(()=>animar(), 3000); //iniciar tudo em 3 segundos
.emer1 {
  background-color:cyan;
}

.emer2 {
  background-color:yellow;
}

.emer3 {
  background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" style="margin-top:100px;">
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer1">
    252 252 251
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer2" style="display:none">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer3" style="display:none">
    252 252 253
  </div>
</div>

Documentation of fadeIn and of fadeOut

Note: I put some colors on the Ivs to make the effect more evident.

  • Thank you very much! It worked perfectly

Browser other questions tagged jquery html

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