为什么 JQuery 不显示 div答案

【问题标题】：Why JQuery doesn't show a div为什么 JQuery 不显示 div
【发布时间】：2016-05-30 03:47:24
【问题描述】：

我在淡入另一个 div 时遇到问题，ID id 的不透明度为 0，所以淡入效果应该可以解决问题

//Opening
setTimeout(function() {
    $('#open').fadeOut('slow');
}, 9000); // <-- time in milliseconds

setTimeout(function() {
    $('#switch').fadeIn('slow');
}, 9000); // <-- time in milliseconds

淡出有效，但淡入无效； #open 是一个 div 的 id，不透明度为 1，#switch ID 是另一个 DIV，其中包含了我得到的大部分内容，没有显示。

我做错了什么？

【问题讨论】：

jsbin?因为它对我来说很好jsbin.com/mikozoyahi/edit?html,js,output
您应该在 CSS 中使用 display: none 而不是 opacity: 0。或者，您应该披露更多 HTML 和 CSS 代码，以便我们正确回答您的问题。

标签： javascript jquery html css fadein

【解决方案1】：

你不能淡入已经出现的东西（你可以，但你不会看到任何区别）。您需要从隐藏的元素开始。

为了说明这一点，我在其中一个元素上添加了display:none（以便在超时后将其显示出来）

//Opening
setTimeout(function() {
  $('#open').fadeOut('slow');
}, 3000); // <-- time in milliseconds

setTimeout(function() {
  $('#switch').fadeIn('slow');
}, 3000); // <-- time in milliseconds

#switch {
  background-color: #333;
  display: none;
  color: white;
}
#open {
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="open">
  OPEN

</div>
<div id="switch">
  Switch
</div>

【讨论】：

我不想删除我的答案，所以我赞成你的....你对我来说太快了:)应该被接受
谢谢！这就是我完成我的小应用所需要的一切！

【解决方案2】：

要使其工作，请改用fadeIn 使用display:none：

<div id="open">
    hello
</div>
<div id="switch" style="display:none;">
    hodor
</div>
<script src="js/jquery-1.12.2.js"></script>
<script>
    setTimeout(function () {
        $('#open').fadeOut('slow');
    }, 1000); // <-- time in milliseconds

    setTimeout(function () {
        $('#switch').fadeIn('slow');
    }, 1000); // <-- time in milliseconds
</script>

【讨论】：

【解决方案3】：

你的 div 应该是这样的

<div id="open">Fade out div</div>
<div id="switch" style="opacity: 1; display: none;">Fade in div</div>

jQuery 代码

setTimeout(function() {
$('#open').fadeOut('slow');
}, 9000); // <-- time in milliseconds



setTimeout(function() {
$('#switch').fadeIn();
}, 9000); // <-- time in milliseconds

【讨论】：