jQuery Транзитные очереди с перестановкой работают нормально только с идентификатором, но не с классом

Question

Я довольно новичок в Javascript и jQuery, и теперь я пытаюсь использовать плагин jQuery Transit для анимации 3 div одновременно. Каждый из них имеет уникальный идентификатор, и все они имеют один и тот же класс.

Теперь, в соответствии с документацией Transit я могу просто стоять в очереди анимации, как это:

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

Если я использую это на каждый элемент, назвав его своим ID, переходы работают нормально. См. jsfiddle here.

Но если я попытаюсь использовать его на всех элементах одновременно, назвав их своим именем класса, то только первый переход работает, а другие переходы переходят в измененную позицию, вместо того, чтобы делать плавный переход с длительностью. См. jsfiddle here.

Это поведение происходит как с jsfiddle, так и с локальной страницей, на которой я работаю, и со всеми эффектами перехода, независимо от положения или непрозрачности и т. Д. Потратив часы, пытаясь исправить это, я не знайте, что делать дальше. Я пробовал различные способы написания кода, но он работает только при использовании идентификаторов. (Использование его без интервала также не имело значения).

Может кто-нибудь объяснить мне, почему пример класса может не работать должным образом или что я могу сделать, чтобы исправить его?

---

Также что-то странное случилось с этим jsfiddle примеров в моих браузерах: После того, как в другой вкладке или программы и возвращаться к jsfiddle, вдруг пример класса работал отлично и на примере ид коробки казалось из синхронизации, как один пропустил один переход. Так было и в Chrome, и в Firefox. После обновления скриптов, пример класса снова оказался неустойчивым, и пример id снова работал правильно. (Я пробовал это несколько раз) .. veeery weird stuff ...

Я не мог воспроизвести это поведение на моем локальном сайте, так что это может быть проблема jsfiddle/browser вместе с функцией интервала?

Answer 1

Использование each():

demo

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