I'm quite new to Javascript and jQuery and am now trying to use the jQuery Transit plugin to animate 3 divs simultaneously. Each of them has a unique ID and all have the same class.
Now, according to the Transit documentation I can just queue the animations like this:
$('.anim')
.transition({ x: 40}, 4000)
.transition({ y: 40}, 4000);
If I use this on every single element calling it with its ID, the transitions work just fine. See jsfiddle here.
But if I try to use it on all elements at the same time, by calling them with their class name, only the first transition works and the other transitions jump to the changed position instead of doing a smooth transition with duration. See jsfiddle here.
This behaviour occurs with jsfiddle as well as on the local page I'm working on and with all transition effects, no matter if position or opacity etc.. After spending hours now trying to fix it, I don't know what to do anymore. I tried various ways of writing the code, but it only works if using IDs. (Using it without the interval also made no difference).
Can anyone explain to me, why the class example may not be working properly or what I could do to fix it?
Also something weird happend with this jsfiddle examples in my browsers: After being in another tab or program and coming back to the jsfiddle, suddenly the class example worked fine and with the id example the boxes seemed out of sync, like one had skipped one transition. This was the case in Chrome as well as Firefox. After updating the fiddles, the class example was jumpy again and the id example worked properly again. ( I tried this multiple times)..veeery weird stuff...
I could not reproduce this behaviour on my local site, so could this be a jsfiddle/browser issue together with the interval function?
Use each() :
_anim.each(function(){
$(this).transition({ x: 40}, 1000)
.transition({ y: 40}, 1000)
.transition({ x: 0}, 1000)
.transition({ y: 0}, 1000);
});