jQuery Transit поставил в очередь переходы, работающие только на id, но не на класс

Question

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

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

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

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

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

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

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

---

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

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

Answer 1

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

демонстрация

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