Addclass on delay for a list

Question

I am rendering a list using a backbone view. After the view is rendered I would like to loop through the list elements and then add a class to one li at a time (removing it from the previous one each time).

So far my code looks like this:

  onRender: function() {
    $('ul > li').each(function(i, element) {
      $(element).delay(i * 50000).toggleClass('fly-in-out')
    })
  }

However when the view loads all li have the fly-in-out class.

Any help greatly appreciated

Answer 1

Using delay, you need to put code in queue:

onRender: function () {
    $('ul > li').each(function (i, element) {
        $(element).delay(i * 50000).queue(function (next) {
            $(this).toggleClass('fly-in-out');
            next();
        });
    })
}

Or use a timeout:

onRender: function () {
    $('ul > li').each(function (i, element) {
        setTimeout(function () {
            $(element).toggleClass('fly-in-out');
        }, i * 50000);
    })
}

Answer 2

your $(element).delay refers to only one element, not all of them. this is going through and applying the class to each element one at a time without accessing any of the others