javascript - 如何交错动画并在每次迭代时同时触发两个动画

Question

我有 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)
});

和一个working example on codepen

如您所见，我已经完成了解决方案的大部分工作，但是当第二次和第三次迭代开始时，之前的元素会跳回到它们的原始位置(尽管当检查员发生这种情况时，css 不会变回).

我在 SO 上查看了各种答案:

.dequeue(),
animate({//some code},{queue: false}),
.stop()
etc

但我没有得到任何爱。如果有任何见解，我将不胜感激!

Answer 1

我所做的更改:

CSS:

1. 从 drop-in-text 中移除边距。
2. 向其中添加了 translateY(-40px)。

JS:

1. 将 margin-bottom: 0 更改为 transform: translateZ (0) translateY(0)

CODEPEN