jQuery animate not functioning with variables

Question

I am practicing jQuery. I have used below in code in my script not working correctly. This code pulls the 9 images from the DOM and translates the images basing on the values defined in the array arr_trans and should be animated parallely, so I have used queue:false .

for ( var i=0; i < $('.mc-item').length;i++) {

$('.mc-item').eq(i).animate({"-webkit-transform":"translate("+ arr_trans[i]+"px"+")"},{duration:100, queue:false});

}

arr_trans[] --> contains 9 different values to translate the each image at different position.

$('.mc-item') --> gets 9 images from the DOM

The above code is working if I use "CSS" instead of "animate". Note, I am running in chrome browser. Please advise.

Answer 1

According to the jQuery API (part "Animation Properties and Values") the following properties can be animated:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality

Because transform is not fully numerical (translate()) the animator doesn't know how to interpret it.

Unless there is a plugin I don't know of you have to implement the animation yourself using setTimeout and multiple .css-actions or use CSS3-animations.