Building an array to use with .animate()

Question

I am having huge difficulties with jQuery UI switchClass method, so I am now convinced that I need to use .animate, however, I have 13 positions to animate to. So I need to transfer the following CSS Class Rules into an array that I can use within the .animate function, something like this:

$(".candidate").each(function(index) { 
    $(this).animate({myCSSarray[index], 'slow'});
});

How can I do this with the following CSS Rules? Where .can is unimportant, but the number after it should be the array key (index) so that it grabs the correct index within the each loop.

.can0 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}

.can1 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}

.can2 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}

.can3 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}

.can4 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}

.can5 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}

.can6 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}

.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}

.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}

.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}

.can10 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}

.can11 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}

.can12 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}

What I am trying to do is this:

I have 13 divs on a page, each with the class candidate that defines the position that is off of the page (to the right), positioned absolutely. Now when the page loads, I need each element to ANIMATE from can0 to can12 according to the index.

So, first time it loops within .each, it should animate to can0, next loop, will give me an index of 1, and should change the element with the class can0 to can1 and animate that, and add the can0 class to $(this) element, with animation. The next loop within .each will return 2 for the index, and should now animate can1 to can2, animate can0 to can1, and add a class can0 to that element with animation. The next loop within the .each method, will now return index of 3, it should now, change can2 class to can3 with animation, animate can1 to can2, animate can0 to can1, and than add the class can0 to that element with animation. This needs to continue until all 13 divs have been placed and there are no more left.

I have tried switching between the classes 1 at a time with jQuery UI's .switchClass method, but this is EXTREMELY choppy animation and looks terrible and sometimes doesn't even switch the class, as you can see here: http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html So, I believe using .animate directly is the only smooth and reliable way to do this.

Here is a jsfiddle, but does not animate at all: http://jsfiddle.net/2Hpjf/6/ It needs to come in from the right and each element should change from can0 to can1 to can2... etc., all the way up to can12, but this doesn't work at all. I even marked the elements for you, so you can see how each can class is defined. Ofcourse, this jsfiddle is an example of the END RESULT after all animation is completed, but I'm struggling with the animation, since jQuery UI .switchClass SUCKS and jQuery doesn't have anyway to animate between classes, which is why I ask for a JS array of all class definitions to be put into the .animate method as needed.

Where do they need to animate to? Also, `z-index` does not work if you don't apply a `position` — putvande, Aug 14 '13 at 07:04
position is applied in the `candidate` class that is global on all of these. — Solomon Closson, Aug 14 '13 at 07:13

Srikanth Kshatriy · Answer 1 · 2013-08-14T07:27:29.063

1

Try something like this...

$(".candidate").each(function(index) { 
    $(this).animate(function(){
       $(this).addClass('can'+index);
    }, 'slow');
});

edited Aug 14 '13 at 07:27

answered Aug 14 '13 at 06:56

Srikanth Kshatriy

444
1
4
10

Well, adding the class looks fine and dandy, but I need to remove the old class. Basically, I need to animate and rotate all `.candidate` elements from `.can0` up to `.can12` – Solomon Closson Aug 14 '13 at 07:16
Also, I get a syntax error using your code: `$(this).animate({function(){` syntax error points to the opening paranthesis in `function()` – Solomon Closson Aug 14 '13 at 07:22
But it needs to animate to that class. The `margin-left`, `width`, etc. must animate. So it's like this. I have 13 div elements, all with the class `candidate`, looping through it first, will make the first index 0 and add can0 class to it, looping through it again, will give index 1, but now I need to animate can0 to can1 class, and than animate the index of 1 with can0, looping again, gives me an index of 2, so now I need to animate can1 class to can2 class, change and animate can0 class to can1, and animate the current element to can0, this needs to happen for all 13 elements. – Solomon Closson Aug 14 '13 at 07:30
Updated my question. Please read the last 3 paragraphs. Your solution is not helping any for this. – Solomon Closson Aug 14 '13 at 07:41
You can see what I am trying to do here: http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html Problem is I'm using jQuery UI to do this and the animation is CHOPPY and sometimes it doesn't switch the class using `.switchClass` – Solomon Closson Aug 14 '13 at 07:46
Here is a jsfiddle, based on the basic concept of what I'm trying to accomplish: http://jsfiddle.net/2Hpjf/5/ But it does not animate at all. It should animate from right (off the page -40%) to can0, than to can1, and can2, etc.. – Solomon Closson Aug 14 '13 at 08:15
Here is a better jsfiddle: http://jsfiddle.net/2Hpjf/6/ cause it defines the `can` classes, so you can see them easily and also, the other jsfiddle was missing an element. Hope this helps you to understand what I need to be able to do... Let me know if there is anything else... and Thanks a million! – Solomon Closson Aug 14 '13 at 08:25
Check this http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles , in jquery animate method you have to give all the css explicitly to achieve that.. i try to do it..if i get some output then i ll let you know.... – Srikanth Kshatriy Aug 14 '13 at 09:15
Yes, I've seen this question and answer already. The answer points to jQuery UI `.switchClass` method, which I tried and is CRAP. It doesn't do it's job of animating between the classes properly. And the `animateToSelector` plugin, I believe, only works with `selectors` in CSS, that is `:active`, `:first`, `:hover`, etc., but I'm not working with selectors, I'm working with actual classes! I wouldn't know how to change it so that my classes are selectors to tell you the truth. If I could change it so that my classes act like selectors than the `animateToSelector` might actually be perfect – Solomon Closson Aug 14 '13 at 13:08

Rituraj ratan · Answer 2 · 2013-08-14T07:08:20.877

i set vworking exapmle here see

html

<div class="candidate"> s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>
<div class="candidate">s</div>

css **

.can0 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}
.can1 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}
.can2 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}
.can3 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}
.can4 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}
.can5 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}
.can6 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}
.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}
.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}
.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}
.can10 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}
.can11 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}
.can12 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}

js

$(".candidate").each(function(index) { 
    $(this).animate( 'slow', function() {
        $(this).addClass("can"+index);
    console.log("index");
  });
});

reference animate

i used this in document ready and in div set some html then it will work for demo i set only "s" character — Rituraj ratan, Aug 14 '13 at 08:31

Building an array to use with .animate()

2 Answers2