javascript – jQuery Transit排队转换只能在id而不是class上正常工作

2019年8月6日 188次阅读

我是
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问题以及interval函数吗？

最佳答案 使用each()：

demo

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