大家好,我精通 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。
但这只会让它们同时消失。 有什么想法吗?
最佳答案
您可以 .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>
要淡出的元素。
关于javascript - 一个接一个地淡入div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3768607/