Changing between multiple classes with jquery

Question

I have the following code:

<div class="drawing1"></div>    
<button id="start">Begin</button>

When the user clicks on the Button, the class assigned to the DIV element should change from drawing1 to drawing5, passing through each drawing in between (There are 5 drawings in total). It should also have a delay() of about 500. My first thought was:

$('div').delay(800).toggleClass('drawing1 drawing2');

Which works but when I try to add the rest of the drawings (Tried several methods using toggleclass and add/remove class), it either jumps to the last one or only does the second one.

How can I set this up so I can go from one drawing class to the next, going through each one, one by one with the delay applied for each.

how about chaining both after each other? and, before someone tells me that it is: Why is this stupid, if so? :) — Wottensprels
– Wottensprels, Commented Apr 16, 2013 at 19:37
What should be animated (you tagged the question 'animation' after all)? — David Thomas
– David Thomas, Commented Apr 16, 2013 at 19:42
delay() only works with a queue, specifically the effects queue or a custom queue. In this case, the delay will not apply, which is why you are seeing it jump to the last class. You need to use setTimeout() instead. — Jeff B
– Jeff B, Commented Apr 16, 2013 at 19:43

rdp · Accepted Answer · 2013-04-24 13:38:36Z

3

var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}
$('#start').click(function(){
    setInterval(nextDrawing, 500);
});

Should do the trick.

Edit: The following modification may be useful to someone for clearing the interval if someone clicks the button more than once.

var i = 2; //Assumes drawing1 is already applied to the div
var nextDrawing = function(){
    $("div").removeClass()
            .addClass("drawing"+i);

    i = ((i + 1) % 5); //To cycle from 1 to 5
    i = i == 0 ? 5 : i;
}

var intervalID = undefined;
$('#start').click(function(){
    if( intervalID != undefined )
    {
        clearInterval(intervalID);
    }
    intervalID = setInterval(nextDrawing, 500);
});

Here is a working example: http://jsfiddle.net/ajhuU/

edited Apr 24, 2013 at 13:38

answered Apr 16, 2013 at 19:38

rdp

2,7652 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Thomas Over a year ago

Rather than merely linking to a resource, please, at the least, summarise that resource in your answer, and show how it can be used to solve the question to which you're posting an answer.

rdp Over a year ago

Tried to clean it up with better explanation.

David Thomas Over a year ago

I appreciate that, but that answer doesn't directly solve the question you're answering, unless I'm misunderstanding something. That answer needs to be adapted in some way(s) in order to answer this question. If, however, that answer explicitly solved this question, then, for future reference, you should consider flagging this question as a duplicate of that question (albeit you don't yet have that privilege).

rdp Over a year ago

Revised it. @David Thomas you were right, my first answer was incorrect. I misunderstood the question.

Matyas · Accepted Answer · 2013-04-16 19:42:44Z

0

var leMethod = function(){ // wrapping in a method localizes variables
  var max = 5;             // nr of drawings
  var activeIdx = 0;       // active drawing
  var timeout = 500;       // the time between changes
  var originalClass = 'some classes that are always there';

  setTimeout(function(){               // execute the method on timeout expiration
    var el = $('div');                 // get whatever element you wish to manage
    el.attr('class', originalClass);   // restore original class
    el.addClass('classNr'+activeIdx);  // add your cycle class
    activeIdx = (activeIdx+1) % max;   // update index
  }, timeout);
};

leMethod();

edited Apr 16, 2013 at 19:42

answered Apr 16, 2013 at 19:37

Matyas

13.7k3 gold badges66 silver badges77 bronze badges

Collectives™ on Stack Overflow

Changing between multiple classes with jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related