一个接一个地淡入div

Question

嘿那些人,我很擅长HTML和CSS,但只有jsut开始划伤jQuery的表面.我希望在页面加载上逐个淡入3个div.到目前为止,我有这个

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

我听说使用css将显示设置为none对任何拥有非JavaScript浏览器的人来说都是一场噩梦,所以我使用hide函数来初始隐藏div.

但这只会一下子消失.有任何想法吗？

Answer 1

.delay()每个人都可以在适当的时候淡出一个,例如:

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

这会使它们按照它们在页面中出现的顺序逐渐消失,这通常是你所追求的,第一个是延迟0所以它是瞬间,第二个是延迟1500ms(所以当第一个完成时等).在.each()回调中i是索引,从0开始,因此您可以使用它来快速计算正确的延迟.

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

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

然后,您需要在JavaScript端进行零维护以添加其他<div>元素以淡入淡出.