我有 3 个文本框。默认情况下它们是隐藏的,我需要它们在 DOM 加载时同时淡入并向下滑动 40px。它们还需要“交错”,以便在元素完成动画后触发下一个动画。
这里是相关的js:
jQuery(function($) {
"Use Strict"
var outerFunction = function(dropIn, time, offset) {
$(dropIn).each(function() {
var me = $(this);
var mejo = $(this).children('.drop-in-text-opacity-wrap');
setTimeout(function() {
me.css({'margin-bottom': 0});
mejo.fadeIn(1000);
},time)
time = time + offset;
})
}
outerFunction('.drop-in-text', 0, 500)
});
如您所见,我已经完成了解决方案的大部分工作,但是当第二次和第三次迭代开始时,之前的元素会跳回到它们的原始位置(尽管当检查员发生这种情况时,css 不会变回).
我在 SO 上查看了各种答案:
.dequeue(),
animate({//some code},{queue: false}),
.stop()
etc
但我没有得到任何爱。如果有任何见解,我将不胜感激!
最佳答案
我所做的更改:
CSS:
- 从
drop-in-text
中移除边距。 - 向其中添加了
translateY(-40px)
。
JS:
- 将
margin-bottom: 0
更改为transform: translateZ (0) translateY(0)
CODEPEN
关于javascript - 如何交错动画并在每次迭代时同时触发两个动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33356593/