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不会改变回来）。

我在这里看了各种各样的答案：

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

但我没有得到任何爱。我很感激任何见解！

Answer 1

我所做的改变：

CSS：

从drop-in-text删除了保证金。
为其添加了translateY(-40px)。

JS：

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

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

1 个答案:

CODEPEN