CODEWITHSUNDEEP
javascriptjqueryhtmlcssdelay
user1615837
user1615837

Reputation: 89

Jquery and CSS3 Rotation

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!

Upvotes: 0

Views: 178

Answers (3)

FrontEnd Expert
FrontEnd Expert

Reputation: 5803

You can use .animate for that.. these are some link that will help you out!

http://tympanus.net/codrops/2011/04/28/rotating-image-slider/

Upvotes: 1

Lucas Green
Lucas Green

Reputation: 3959

//wrap in a function to provide closure on following vars
//this will prevent them from being in the global scope and
//potentially colliding with other vars
(function () {
    var sub = 0,
        delay = 500, //500 ms = 1/2 a second
        scrollScript = $('#scroll-script'),
        slides = ['one', 'two', 'three', 'four'],
        handle;

    //calls the provided anonymous function at the interval delay
    handle = setInterval(function () {
        scrollScript.removeClass().addClass('slide-' + slides[sub]);
        sub += 1;

        // test to see if there is another class in the sequence of classes
        if (!slides[sub]) {
            //if not halt timed callback
            clearInterval(handle);
        }
    }, delay);
}());

To make it circular: 

//wrap in a function to provide closure on following vars
//this will prevent them from being in the global scope and
//potentially colliding with other vars
(function () {
    var sub = 0,
        delay = 500, //500 ms = 1/2 a second
        scrollScript = $('#scroll-script'),
        slides = ['one', 'two', 'three', 'four'],
        handle;

    //calls the provided anonymous function at the interval delay
    handle = setInterval(function () {
        scrollScript.removeClass().addClass('slide-' + slides[sub % slides.length]);
        sub += 1;
    }, delay);
}());

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

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);

Upvotes: 2

Related Questions