javascript - 一个接一个地淡入div

Question

大家好，我精通 HTML 和 CSS，但对 jQuery 的了解才刚刚开始。我希望让 3 个 div 在页面加载时一个接一个地淡入。到目前为止我有这个

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().fadeIn(1500);
    $('#3').hide().fadeIn(1500);
</script>

我听说使用 css 将显示设置为无对于任何使用非 JavaScript 浏览器的人来说都是一场噩梦，所以我使用 hide 函数来最初隐藏 div。

但这只会让它们同时消失。有什么想法吗？

Answer 1

您可以 .delay() 每一个都会在正确的时间淡入，例如:

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

这会使它们淡入...按照它们在页面中出现的相同顺序通常是您所追求的，第一个延迟 0 所以它是即时的，第二个延迟 1500 毫秒(所以当第一个完成时，等等).在 .each() 回调i是索引，从 0 开始，因此您可以在此处使用它来快速计算正确的延迟。

这里的另一个优点是这种方法更容易维护，例如给他们一个类然后你可以这样做:

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

然后您需要在 JavaScript 端进行零维护以添加额外的 <div>要淡出的元素。