Question

with some help I have created a rotating slider using jquery and CSS3, and it seems to be working great except for one thing… The first ‘slide’ seems to have double the delay on the first play through. Can anyone shed some light on why this might be happening? Any help would be greatly appreciated…

var i = 0;
var z = 0;
delay = 5000;

var el = $('#scroll-script');
var ql = $('#info-box');

var classesb = ['fp-info-one', 'fp-info-two', 'fp-info-three', 'fp-info-four'];    
var classes = ['fp-slide-one', 'fp-slide-two', 'fp-slide-three', 'fp-slide-four'];

var interval = setInterval(function () {

  el.removeClass().addClass(classes[i]);
  i = (i + 1) % 4;

  ql.removeClass().addClass(classesb[z]);
  z = (z + 1) % 4; 

}, delay);

Answer 1

Your anonymous function, the one inside the setInterval, is waiting the same amount of time (your delay) to run initially. You can either:

1) change the anonymous function into a named function, and run that once before executing your interval

2)Run these lines before the setInterval method. Just to emulate that the code inside the anonymous function once.

   el.addClass(classes[3]);
   ql.addClass(classesb[3]);

You can look inside this fiddle, and see some solutions I have provided.

http://jsfiddle.net/G7NdU/4/