Fadein and Fadeout in sequence

Asked

Viewed 70 times

0

I have a challenge that I need the Divs to appear in sequence, one after the other.

To do this, I created a loop that performs the functions of FadeIn() and FadeOut() for each DIV element of my HTML.

However, as I understand it, the loop is running everything at once, without having an interval between the appearance of a div and another. I tried using functions like setInteval() and sleep(), but I was unsuccessful.

Follows code

            $(document).ready(function() {
                var tempo = 2000;
                var quant = $("#conteudos").children().length;
                var res = tempo * quant;
            
                carregar();
                
                function carregar(){
                    var i = [1,2,3,4,5];
                    var quanti = i.length;
                    
                     for(j=0;j<quanti;j++){
                        var divagora = i[j];    
                        $("#div"+divagora).fadeIn();
                        $("#div"+divagora).fadeOut(3000);
                    
                     }
                
                }

        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>

        
    </head>
<body>
    <div id="conteudos">
        <div id="div1" style="position:absolute; display: none; width: 100px; height: 100px; background-color: red"></div>
        <div id="div2" style="position:absolute; display: none; width: 100px; height: 100px; background-color: blue"></div>
         <div id="div3" style="position:absolute; display: none; width: 100px; height: 100px; background-color: black"></div>
        <div id="div4" style="position:absolute; display: none; width: 100px; height: 100px; background-color: yellow"></div>
        <div id="div5" style="position:absolute; display: none; width: 100px; height: 100px; background-color: purple"></div>
    </div>
</body>
</html>

Would anyone have any proposal for this case ?

Thank you!

javascript jquery html5 css3

  • It has to be with JS, it looks pretty simple to do with CSS...

  • @hugocsl it is necessary to use JS because in the Array I will determine which Divs will participate in the loop.

2 answers

1


$(document).ready(function() {
  
  carregar();

  function carregar(){
    
    var quant = $("#conteudos").children().length;
      
    var contador = 1;

    setInterval(function(){

      $("#div"+contador).fadeIn();
      $("#div"+contador).fadeOut(3000);

      contador == quant ? contador = 1 : contador++;

    }, 3000);

  }

});

  • Great solution!!

0

No need to use JS for this type of animation, as you can see in the example below you can apply dynamically or hard-coded delay for each item, using the attribute Animation-delay. This attribute initializes the animation according to the defined amount of time.

We call this kind of animation Hierarchical Animation.

.box {
    background: #002321;
    margin: 5px;
    height: 100px;
    width: 100px;
    float: left;
    transition: .35s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    opacity: 0;
}

.box-container {
    max-width: 500px;
    overflow: hidden;
    border: 1px solid #000; 
}

.box-container:hover .box {
   opacity: 1;
}

.box-container .box:nth-child(2) {transition-delay: .1s}
.box-container .box:nth-child(3) {transition-delay: .2s}
.box-container .box:nth-child(4) {transition-delay: .3s}
.box-container .box:nth-child(5) {transition-delay: .15s}
.box-container .box:nth-child(6) {transition-delay: .25s}
.box-container .box:nth-child(7) {transition-delay: .35s}
.box-container .box:nth-child(8) {transition-delay: .4s}
<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Browser other questions tagged javascript jquery html5 css3

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