4

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

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

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

如果我在每个使用其 ID 调用它的元素上使用它，则转换效果很好。请参阅此处的 jsfiddle。

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

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

谁能向我解释一下，为什么类示例可能无法正常工作或者我可以做些什么来解决它？

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

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

4

1 回答 1

2

使用each()：

演示

_anim.each(function(){
    $(this).transition({ x: 40}, 1000)
        .transition({ y: 40}, 1000)
        .transition({ x: 0}, 1000)
        .transition({ y: 0}, 1000);
});
于 2015-04-16T12:29:47.437 回答