CODEWITHSUNDEEP
jqueryarraysjquery-animate
Solomon Closson
Solomon Closson

Reputation: 6217

Building an array to use with .animate()

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.

Upvotes: 0

Views: 297

Answers (2)

Srikanth Kshatriy
Srikanth Kshatriy

Reputation: 444

Try something like this...

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

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10388

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

Upvotes: 0

Related Questions