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');  
}); 

但我不太了解该语言，无法让它工作......

任何帮助将不胜感激!

Answer 1

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

你的代码也不正确，即使你隐藏了DIV，这也不起作用。它应该是 setTimeout(show, 3000);

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

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

<小时/>

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

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

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

示例 - http://jsfiddle.net/zeXyG/1/

<小时/>

根据您下面的评论。将 delay() 添加到调用中，如下所示

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

页面加载 2 秒后，这将隐藏 div，然后慢慢淡入。看this example小心。