javascript - 延迟后淡入div

Question

我是 javascript 新手，所以我正在努力学习基础知识......

我正在使用这个延迟来引入一个 div，但我想将 div 作为这个功能的一部分淡入淡出（不仅仅是让盒子出现）

function show() {

AB = document.getElementById('div_with_text');

AB.style.display = 'inline';
}

setTimeout("show()", 3000);

有人能帮忙吗？

我尝试添加以下内容：

$(function(){  
  $('#div_with_text').fadeIn('slow');  
});

但我对语言的了解不够好，无法让它工作......

任何帮助将非常感激！

score 2 · Accepted Answer

你的DIV一开始就隐藏了吗？如果没有，那是你的问题。你正试图打开一扇已经打开的门。

您的代码也不正确，即使您隐藏了DIV，这也行不通。应该是setTimeout(show, 3000);

使用您提供的 JavaScript 代码 ( setTimeout)，在页面加载 3 秒后，您将尝试显示 DIV。您是否注意到 DIV 已经存在并且从未像您预期的那样在 3 秒后“出现”？

示例 - http://jsfiddle.net/BLPTq/2/ - 只需单击运行并查看。

要使其工作，请先隐藏 DIV，然后调用 setTimeout 或 jQuery 方法。示例 - http://jsfiddle.net/zeXyG/ - 只需单击运行并查看。检查 CSSdisplay:none;

或者，如果您不想用 CSS 隐藏它，只需在调用hide()之前调用fadeIn()

$('#div_with_text').hide().fadeIn('slow');

根据您在下面的评论。添加delay()到呼叫，如下所示

$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(2000).fadeIn('slow');

页面加载后 2 秒，这将隐藏 div，然后慢慢淡入。仔细看这个例子。

score 0 · Accepted Answer

fadeIn仅当您在页面上加载 jQuery 库时，该方法才有效。没有它，该方法将无法工作，因为它不是本机 Javascript 的一部分。

加载 jQuery 后，该方法将在您的语法正确时起作用。

2 回答 2