如何在每次迭代中错开动画并同时触发两个动画

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

和有关Codepen的工作示例

如您所见，我已经找到解决方案的大部分方法，但是当第二次和第三次迭代开始时，透明元素会跳回到其原始位置（尽管按检查员的情况发生时，css并不会变回原来的位置）。

我在这里使用以下方法查看了各种答案：

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

但是我没有得到任何爱。我将不胜感激！