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順序淡入淡出動畫遇到延遲和抖動

回答

相關問題