How to set a duration for an element to show one after another

Question

I am trying to get the solutionBlock elements to fade in one after another in sequence. I am using the duration function to do so, but my attempt is not fairing very well.

There are three images in the snippet below. The first one isn't showing because of the next function.

What am I doing wrong?

$('.solutionBlock').each(function(index) {
   $(this).delay(500*index).next().addClass('active');
});

.solutionBlock {
 width: 25%;
 height: 40vh;
 display: inline-block;
 vertical-align: top;
 overflow: hidden;
 box-sizing: border-box;
 border-bottom: 2px solid #FFF;
 border-right: 2px solid #FFF;
 position: relative;
 cursor: pointer;
 opacity: 0;
}
.solutionBlock.active {
 opacity: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
 z-index: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
 top: 0;
 left: 0;
 right: 0;
 position: absolute;
}
.solutionBlock:hover .overlay {
 background-color: rgba(0,0,0,0.0);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
 -webkit-transform: scale(1.1);transform: scale(1.1);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
 font-size: 1.4rem;
 font-family: 'Muli', sans-serif;
 line-height: 1.4em;
 color: #FFF;
 padding: 0 20px;
 font-weight: 800;
 text-shadow: 2px 2px #242424;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="solBlocks">
   <div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="A">
    <div class="total-center front">
     <h2 class="sBlockTitle">A</h2>
    </div>
   </div><div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="B">
    <div class="total-center front">
     <h2 class="sBlockTitle">B</h2>
    </div>
   </div><div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="C">
    <div class="total-center front">
     <h2 class="sBlockTitle">C</h2>
    </div>
   </div>
</section>

@Paul, please consider accepting my [answer](https://stackoverflow.com/a/49777375/6804958) if this resolved your query. — Muhammad Usman, Apr 11 '18 at 14:17

score 4 · Accepted Answer · answered Apr 11 '18 at 14:12

Well, if this is what you want. I would have done it this way :)

You're obviously really close to what you want to achieve. But you need to add active class to element with solutionBlock to make them active using of next() is not doing things in your court. So,this is how you can do that

$('.solutionBlock').each(function(index) {
 setTimeout(()=>{
       $(this).addClass("active");
   }, 500*index);
    
});

.solutionBlock {
 width: 25%;
 height: 40vh;
 display: inline-block;
 vertical-align: top;
 overflow: hidden;
 box-sizing: border-box;
 border-bottom: 2px solid #FFF;
 border-right: 2px solid #FFF;
 position: relative;
 cursor: pointer;
 opacity: 0;
}
.solutionBlock.active {
 opacity: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
 z-index: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
 top: 0;
 left: 0;
 right: 0;
 position: absolute;
}
.solutionBlock:hover .overlay {
 background-color: rgba(0,0,0,0.0);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
 -webkit-transform: scale(1.1);transform: scale(1.1);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
 font-size: 1.4rem;
 font-family: 'Muli', sans-serif;
 line-height: 1.4em;
 color: #FFF;
 padding: 0 20px;
 font-weight: 800;
 text-shadow: 2px 2px #242424;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="solBlocks">
   <div class="solutionBlock ">
    <div class="overlay  "></div>
    <img src="http://via.placeholder.com/300" alt="A">
    <div class="total-center front">
     <h2 class="sBlockTitle">A</h2>
    </div>
   </div>
      <div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="B">
    <div class="total-center front">
     <h2 class="sBlockTitle">B</h2>
    </div>
   </div>
      <div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="C">
    <div class="total-center front">
     <h2 class="sBlockTitle">C</h2>
    </div>
   </div>
</section>

score 1 · Answer 2 · answered Apr 11 '18 at 14:15

You have to problems:

1) .next():

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

So that's why it is not working for the first element (it will addClass to the next one... ie: the second)

2) As shown in this answer

You can't directly delay an addClass call

A possible solution is this:

$(this).delay(500*index).queue(function(){$(this).addClass('active')});

$('.solutionBlock').each(function(index) {
  $(this).delay(500*index).queue(function(){$(this).addClass('active')});
});

.solutionBlock {
 width: 25%;
 height: 40vh;
 display: inline-block;
 vertical-align: top;
 overflow: hidden;
 box-sizing: border-box;
 border-bottom: 2px solid #FFF;
 border-right: 2px solid #FFF;
 position: relative;
 cursor: pointer;
 opacity: 0;
}
.solutionBlock.active {
 opacity: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock .overlay {
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
 z-index: 1;
 -webkit-transition: all .35s ease;transition: all .35s ease;
 top: 0;
 left: 0;
 right: 0;
 position: absolute;
}
.solutionBlock:hover .overlay {
 background-color: rgba(0,0,0,0.0);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock:hover img {
 -webkit-transform: scale(1.1);transform: scale(1.1);
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.solutionBlock img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 -webkit-transition: all .35s ease;transition: all .35s ease;
}
.sBlockTitle {
 font-size: 1.4rem;
 font-family: 'Muli', sans-serif;
 line-height: 1.4em;
 color: #FFF;
 padding: 0 20px;
 font-weight: 800;
 text-shadow: 2px 2px #242424;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section id="solBlocks">
   <div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="A">
    <div class="total-center front">
     <h2 class="sBlockTitle">A</h2>
    </div>
   </div><div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="B">
    <div class="total-center front">
     <h2 class="sBlockTitle">B</h2>
    </div>
   </div><div class="solutionBlock">
    <div class="overlay"></div>
    <img src="http://via.placeholder.com/300" alt="C">
    <div class="total-center front">
     <h2 class="sBlockTitle">C</h2>
    </div>
   </div>
</section>

How to set a duration for an element to show one after another

2 Answers2