jQuery 中转排队转换只能在 id 上正常工作，但不能 class

Question

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

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

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

如果我在每个使用其 ID 调用它的元素上使用它，转换就可以正常工作。参见 jsfiddle here。

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

jsfiddle 以及我正在处理的本地页面以及所有过渡效果都会出现此行为，无论是位置还是不透明度等。在花了几个小时试图修复它之后，我不知道该怎么做了。我尝试了多种编写代码的方法，但只有在使用 ID 时才有效。（没有间隔使用它也没有区别）。

任何人都可以向我解释为什么 class 示例可能无法正常工作或者我可以做些什么来解决它？

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

我无法在我的本地站点上重现此行为，所以这可能是 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);
});

jQuery 中转排队转换只能在 id 上正常工作，但不能 class

jQuery Transit queued transitions only working properly on id but not class

javascript

jquery

transitions

transit