jquery - 页面加载时显示多个 DIVS - 无需悬停

Question

我对 javascript/jquery 不太了解，我想做一些事情:(请原谅我糟糕的英语!)

我想让一些 DIVS 逐步出现，无需任何鼠标悬停。我的意思是:第一个 div 在 10 秒内出现，然后第二个 div 在 15 秒内出现，依此类推。

您对这段代码有何看法？

它有效，但我不确定这是否非常干净:

<script>
    jQuery(document).ready(function(){
        $('#firstDiv').hide(0).delay(500).show(400);
    });
    jQuery(document).ready(function(){
        $('#secondDiv').hide(0).delay(3500).show(400);
    });
</script>

预先感谢您的帮助!

Answer 1

您可以通过CSS隐藏元素(display:none;)

此外，您可以将两个命令 (.delay().show();) 放在同一个 document.ready 中:

<script>
    jQuery(document).ready(function(){
        $('#firstDiv').delay(500).show(400);
        $('#secondDiv').delay(3500).show(400);
    });
</script>

现在，对于您的第二个请求，这将使其产生不同的效果:

<script>
    jQuery(document).ready(function(){
        $('#firstDiv').delay(500).fadeIn(400);
        $('#secondDiv').delay(3500).slideIn(400);
    });
</script>