Question

When document is ready, there is a button that gets a new class names frame1. I want to set another class on this button after two seconds.

$(document).ready(function () { 
    setTimeout(function () {
        $('#button').addClass('frame1')
    }, 2000);
});

I want to add another class ‘frame2’ after two seconds if that is possible?

Answer 1

If you just want to add a class every coule of seconds until you have no more classes to add, you could use an interval and then clear it when the classes have all been added:

var group = [ 'whiteFG', 'redBG' ];
var intvl= setInterval(function(){
    group.length 
        ? $("#foo").addClass(group.pop()) 
        : clearInterval(intvl) ;
}, 2000);

Fiddle: http://jsfiddle.net/EvXPy/

Or you could simply iterate over your array of class names and set timeouts from there:

$(['redBG','whiteFG']).each(function(i,o){
    setTimeout(function(){
        $("#foo").addClass(o);
    }, i * 2000 );
});​​​​​​​​

Note that the first effect will run immediately since i is equal to the index of 0, meaning the timeout happens instantly. If you want this to be delayed, you can increment i as you see fit before multiplying by 2000.

Fiddle: http://jsfiddle.net/EvXPy/1/