Geek Answers Handbook

JQuery Transitional transition queues work fine only with an identifier, but not with a class

I am new to Javascript and jQuery, and now I'm trying to use the jQuery Transit plugin to animate 3 divs at the same time. Each of them has a unique identifier, and they all have the same class.

Now, according to the Transit documentation, I can simply queue the animations as follows:

$('.anim')
.transition({ x: 40}, 4000)
.transition({ y: 40}, 4000);

If I use this for every element calling it with its identifier, the transitions work just fine. See jsfiddle here .

But if I try to use it on all elements at the same time, calling them with their class name, only the first transition works, and other transitions move to the changed position instead of making a smooth transition with a duration. See jsfiddle here .

This behavior occurs both with jsfiddle, and with the local page I work on, and with all the transition effects, regardless of position or opacity, etc. Having spent hours trying to fix this, I don’t know what to do next. I tried various ways of writing code, but it only works when using identifiers. (Using it without an interval also didn't matter).

Can someone explain to me why the class example might not work properly or what can I do to fix it?

, - jsfiddle : , jsfiddle, , , . Chrome, Firefox. , , id . ( ).. veeery weird stuff...

, jsfiddle/browser ?

+4
1

each():

_anim.each(function(){
    $(this).transition({ x: 40}, 1000)
        .transition({ y: 40}, 1000)
        .transition({ x: 0}, 1000)
        .transition({ y: 0}, 1000);
});
+2

More articles:


All Articles