Question

I have the following code which adds and removes a class every 2000 milliseconds:

http://jsfiddle.net/Kh2fz/1/

var $elements = $('#fp-slides div'); 
var total_elements = $elements.length;
var element_with_class = 0;
window.setInterval( function () {
  $elements.eq(element_with_class).removeClass('current');
  element_with_class += 1;
  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }
  $elements.eq(element_with_class).addClass('current');  
}, 2000 );

I’m wondering if it is possible to change it so that the first effect is 1500 and then every change after that is then 2000.

Answer 1

You can use setTimeout for the fist time and then runsetInterval`:

var $elements = $('#fp-slides div'); 

var total_elements = $elements.length;
var element_with_class = 0;

var handler = function () {

  $elements.eq(element_with_class).removeClass('current');

  element_with_class += 1;

  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }

  $elements.eq(element_with_class).addClass('current'); 
};

window.setTimeOut( function() { 
    handler(), 
    window.setInterval(handler, 2000); 
}, 1500);

http://jsfiddle.net/Kh2fz/3/