javascript - jQuery fadeOut 有效，fadeIn 没有错误，没有变化，同样 fadeToggle 也不会回来

Question

这让我抓狂......这很好用:

<div id="box"> 
    <img src="/images/wpgen_box1.jpg">
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        setTimeout(function(){ jQuery('#box').fadeOut(); }, 5000);
    });
</script>

但这不起作用:

<div style="display:none" id="box">
    <img src="/images/wpgen_box1.jpg">
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        setTimeout(function(){ jQuery('#box').fadeIn(); }, 5000);
    });
</script>

那么，有人知道为什么我可以淡出但不能淡入吗？

Answer 1

看起来这是两个元素的 ID 相同的问题 - ID 应该是唯一的

Here is a link to a post talking about this 'issue' :

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid

$(document).ready(function() {
  setTimeout(() => $('#box').fadeOut(), 5000);
});

$(document).ready(function() {
  setTimeout(() => $('#box2').fadeIn(), 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box">
  <img src="https://via.placeholder.com/250?text=I am visible">
</div>

<div style="display:none" id="box2">
  <img src="https://via.placeholder.com/250?text=I was invisible">
</div>