Question

我在另一个div中褪色有问题，ID ID有0不透明度，所以fadein效果应该可以解决这个问题

//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，其中包含我获得的大部分内容，但未显示。

我做错了什么？

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

3 个答案: