Question

I am currently adding a class name “animate” to <li> items with this script:

$('.list-blocks li').addClass('animate');

But this script immediately sets the class to the selected elements.

How can I add the class to the next selected element with one second buffer?

For example: After the page is loaded, the script give the first li the class “animate”. After 1 second, the second li get the class “animate”. And after 2 seconds the third li gets the class “animate”.

How can I achieve this effect?

Answer 1

Try:

$('.list-blocks li').each(function (index) {
  var item = $(this);
  setTimeout(function () {
    item.addClass('animate');
  }, index * 1000);
});

Demo