延迟后淡入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隐藏它，只需在致电hide()之前致电fadeIn()

$('#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。

Answer 2

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

加载jQuery后，that method将正常工作，因为您的语法正确。