javascript - jQuery Transit 排队转换只能在 id 上正常工作，但不能在类上正常工作

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 都是这种情况。更新 fiddle 后，类示例再次跳动，id 示例再次正常工作。 (我试了很多次)...非常奇怪的东西...

我无法在我的本地站点上重现此行为，所以这可能是 jsfiddle/浏览器问题以及间隔函数吗？

Answer 1

使用 each() :

demo

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