CODEWITHSUNDEEP
javascriptjqueryhtml
Claude
Claude

Reputation: 216

jQuery sequential fadeIn animations experiencing lag and wobble

I am experiencing very poor performance on the following jQuery code and I don't know why. The goal was to have a sequential fade in of the elements as instructed by the google material design principles of not more than 20ms between elements. It is for a registration form where form fields should fade in from top to bottom. I experience lag, and wobbling of the animation.

<!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>

Thank you very much for any help or suggestions.

Here is a jsfiddle: https://jsfiddle.net/re26js63/

Upvotes: 0

Views: 55

Answers (1)

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

you got a problem in your delay calcualtion, here is a demo in base of yours

<script>
  $(function () {

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

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

Upvotes: 1

Related Questions