为什么 JQuery 不显示 div

Question

我在淡入另一个 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是另一个DIV的id，其中包括我得到的大部分内容，没有显示.

我做错了什么？

Answer 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>

Answer 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>

Answer 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

为什么 JQuery 不显示 div

Why JQuery doesn't show a div

html

javascript

css

jquery

fadein