我在以下jQuery代码上的性能非常差，我不知道为什么。目标是按照google材质设计原则的指示使元素顺序渐入，元素之间的间隔不超过20ms。它是用于注册表单的，表单字段应从上到下逐渐变浅。我遇到了滞后和动画晃动的问题。
<!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/
最佳答案
您在延迟计算中遇到问题，这是您的基础中的demo
<script>
$(function () {
$(".fade_in_container").hide();
$(".fade_in_container").each(function (index) {
$(this).delay((100 + 20) * index).fadeIn(250);
});
});
</script>
关于javascript - jQuery连续淡入动画出现滞后和摆动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45161908/