Question

我在以下jQuery代码上遇到的性能很差，我不知道为什么。目标是按照谷歌材料设计原则的指示对元素进行连续淡入，每个元素之间的间隔不超过20毫秒。它适用于表单字段应从上到下淡入的注册表单。我经历了滞后和动画的摇摆。

<!DOCTYPE html>
<head>
</head>
<body>
<div id="center_block" style="width:100px">
    <span class="fade_in_container">
    <input type="text" id="1" name="1">
    </span>
    <span class="fade_in_container">
    <input type="text" id="2" name="2">
    </span>
    <span class="fade_in_container">
    <input type="text" id="3" name="3">
    </span>
    <span class="fade_in_container">
    <input type="text" id="4" name="4">
    </span>
    <span class="fade_in_container">
    <input type="text" id="5" name="5">
    </span>
</div> 
<script>
  $(function () {

      $(".fade_in_container").hide();

      $(".fade_in_container").each(function (index) {
          $(this).delay(100 + 20 * index).fadeIn(250);
      });
});
</script>
</body>

非常感谢您的任何帮助或建议。

这是一个jsfiddle：https://jsfiddle.net/re26js63/

Answer 1

你的延迟计算出现了问题，这里有demo你的基础

<script>
  $(function () {

      $(".fade_in_container").hide();

      $(".fade_in_container").each(function (index) {
          $(this).delay((100 + 20) * index).fadeIn(250);
      });
});
</script>

jQuery sequential fadeIn动画经历滞后和摆动

1 个答案: