jQuery Transit排队转换只能在id上运行，但不能在class上运行

Question

我对Javascript和jQuery很陌生，我现在正尝试使用jQuery Transit插件同时为3个div设置动画。 他们每个人都有一个唯一的ID，并且都有相同的类。

现在，根据Transit文档，我可以像这样对动画进行排队：

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

如果我在每个用它的ID调用它的元素上使用它，那么转换就可以了。请参阅jsfiddle here。

但是如果我尝试同时在所有元素上使用它，通过使用它们的类名称调用它们，只有第一个转换起作用而其他转换跳转到更改的位置而不是持续时间的平滑转换。请参阅jsfiddle here。

使用jsfiddle和本地页面上会出现这种情况，无论是位置还是不透明度等，我都会使用所有过渡效果。 现在花了几个小时试图解决它，我不知道该怎么做了。我尝试了各种编写代码的方法，但只有在使用ID时才有效。 （没有间隔使用它也没有区别）。

任何人都可以向我解释，为什么课程示例可能无法正常工作或我可以做些什么来修复它？

---

在我的浏览器中，这个jsfiddle示例也发生了一些奇怪的事情： 在进入另一个选项卡或程序并回到jsfiddle之后，突然这个类示例运行正常，并且使用id示例框似乎不同步，就像一个跳过了一个转换。 Chrome和Firefox都是这种情况。更新了小提琴后，类示例再次跳转，id示例再次正常工作。 （我多次尝试过这种情况）.. veeery奇怪的东西......

我无法在本地网站上重现此行为，因此这可能是一个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);
});