jQuery顺序淡入淡出动画遇到延迟和抖动

我在下面的jQuery代码中遇到了很差的性能，我不知道为什么。目标是按照元素之间不超过20毫秒的Google材料设计原则指示，逐步淡化元素。这是一个注册表单，表单域应该从上到下逐渐消失。我经历了滞后和动画的摇摆。jQuery顺序淡入淡出动画遇到延迟和抖动

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

来源

2017-07-18 Claude

只是增加延迟 –

你有你的延迟calcualtion一个问题，这里是你的基地demo

<script> 
    $(function() { 

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

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

来源

2017-07-18 08:56:10

谢谢。你认为，我可以在没有100ms开销的情况下运行效果吗？其实我想这样做没有最初的延迟，但不知何故，这在浏览器加载时表现不佳。 – Claude

我看到了时间，但它的意见 –

jQuery顺序淡入淡出动画遇到延迟和抖动

回答

相关问题