Jquery and CSS3 Rotation

Question

I could really use some help! I am trying to create rotating scroller effect using jquery and CSS3. I would like to run the following in sequence with a delay between each one:

Javascript:

$('#scroll-script')
.removeClass().addClass('slide-one')
DELAY
.removeClass().addClass('slide-two')
DELAY
.removeClass().addClass('slide-three')
DELAY
.removeClass().addClass('slide-four')
DELAY

HTML:

<div id="scroll-script" class="slide-one"></div>

Just starting out with Jquery, any help would be greatly appreciated!

Answer 1

Once:

var i = 0;
delay = 1000;
var el = $('#scroll-script');
var classes = ['slide-one', 'slide-two', 'slide-three', 'slide-four'];

var interval = setInterval(function () {
  el.removeClass().addClass(classes[i]);
  i += 1;
  if (i >= classes.length) clearInterval(interval);
}, delay);

In circle:

var i = 0;
delay = 1000;
var el = $('#scroll-script');
var classes = ['slide-one', 'slide-two', 'slide-three', 'slide-four'];

var interval = setInterval(function () {
  el.removeClass().addClass(classes[i]);
  i = (i + 1) % 4;
}, delay);