i have 3 div elements with class name gridbox i want to add a class into all 3 elements with delay.

for example:

new class should be added to all 3 div elements with a delay between each of them.

i triel following code which is not working.

$('.gridbox').addClass('animation').delay(1500);

What is wrong here?

i have 3 div elements with class name gridbox i want to add a class into all 3 elements with delay.

for example:

new class should be added to all 3 div elements with a delay between each of them.

i triel following code which is not working.

$('.gridbox').addClass('animation').delay(1500);

What is wrong here?

• javascript
• jquery

• 1 see this:: stackoverflow./questions/11797668/… – Sudhir Bastakoti Commented Jan 2, 2014 at 10:17

8 Answers 8

You could try something like this:

var divs = $( '.gridbox' );
var index = 0;

var delay = setInterval( function(){
  if ( index <= divs.length ){
    $( divs[ index ] ).addClass( 'animation' );
    index += 1;
  }else{
    clearInterval( delay );
  }
}, 1500 );

What I'm doing here is this:

1. Extract all of the elements and store them in the divs variable.
2. Save an index of the element you are currently working with.
3. Initiate a setTimeout function with a delay of 1.5 seconds.
4. If we are not at the end of the list of elements, add the class to the relevant element after converting it to a jQuery element.
5. Increment our index variable.
6. Stop the setTimeout once we have iterated over all of the elements.

$('.gridbox').each(function(i) {
    (function(self, j) {
        setTimeout(function() {
            $(self).addClass('animation');
        },(j*1500)+1500);
    })(this, i);
});

FIDDLE

$('.gridbox').each(function(index) {
  var that = this;
  setTimeout(function() {
    $(that).addClass('animation');
  }, 1500 * index);
});

if you want to apply a delay on a jquery function such as addClass you need to use a javascript setTimeout because as described here .delay() is limited and should be used for jQuery effects

You can try bination of .each() and setTimeout

$('.gridbox').each(function (index) {
    var $this = $(this);
    setTimeout(function () {
        $this.addClass('animation');
    }, 1500 * index );
});

Fiddle DEMO

a nicer solution :)

var st = setInterval(function(){
    var gb = $('.gridbox:not(.animation):eq(0)');
    gb.length > 0 ? gb.addClass('animation') : clearInterval(st);
},1500)

http://jsfiddle/jR984/

You can do this without jQuery

function addClass () {
  var div = document.getElementsByClassName("aaa");
  div[0].className = "bbb";
  setTimeout(addClass, 1000);
}
window.onload = function () {
  addClass();
}

http://jsfiddle/khGCv/

Although setTimeout/Interval kinda "works", jquery provides a much cleaner way to do custom animations: queue, for example:

$(".gridbox").each(function() {
    var box = this;
    $("body").queue(function(next) {
        $(box).addClass("animation");
        next();
    }).delay(1000)
});