CODEWITHSUNDEEP
javascriptjqueryloops
agon024
agon024

Reputation: 1007

jQuery addClass loop starting from last-child up

Every thing works as far as every 500 milliseconds it adds a class to the next blockWrap element in line.

But what I want it to do is start with the last "blockWrap" element, add the class and then work its way up. How can I achieve this?

here is my HTML:

<div class="blockWrap">
    <div class="blockImg">
      <img src="img/download.jpg">
    </div>
  </div>
  <div class="blockWrap">
    <div class="blockImg">
      <img src="img/download.jpg">
    </div>
  </div>
  <div class="blockWrap">
    <div class="blockImg">
      <img src="img/download.jpg">
    </div>
  </div>

Here is my jQuery loop:

$(document).ready(function(){
  $(function () {
    var block = $('.blockWrap');
    (function _loop(wrap) {
      block.eq(wrap).addClass('slideIn');
      setTimeout(function () {
        _loop((wrap + 1) % block.length);
      }, 500);
    }(0));
  });
});

Thanks for your help.

Upvotes: 1

Views: 172

Answers (1)

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code . pass block.length as param and deduct value -1 . it will add class from bottom to up

$(function () {
var block = $('.blockWrap');
 (function _loop(wrap) {
  block.eq(wrap).addClass('slideIn');
    setTimeout(function () {
       _loop((wrap - 1) % block.length);
    }, 500);
   }(block.length));
});

Upvotes: 1

Related Questions