无法弄清楚我的 div 与 jQuery 是如何淡入淡出的

Question

观察

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/scripts.js"></script>

我有一个 link 指向页面下方的一个部分

<a id="seemore" class="seemore" href="#down">SEE MORE</a>

div 的 css，我想在移动到它时淡入

#down {
  margin-top: 100%;
  justify-content: center;
  visibility: hidden;
 }

但是我的脚本不起作用:(

$("#seemore").click(function(){
  $("#seemore").fadeOut("fast");
  $("#down").fadeIn("slow");
});

在本地构建此站点

Answer 1

如果您需要对象淡入，您必须使用 display: none 开始隐藏对象。

你可以查看这个例子：

$("#show-more").click(function(e) {
  e.preventDefault();
  $("#show-more").hide();
  $("#more").fadeIn();
});

#more {
display: none;
}

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

<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<p id="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<a id="show-more" href="#">Show more</a>

Answer 2

你要找这个吗？

$(document).ready(function(){
$("#seemore").click(function(){
  $("#seemore").fadeOut("fast");
  $("#down").fadeIn("slow");
});
});

#down {
 display:none;
 }

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

<a id="seemore" class="seemore" href="#down">SEE MORE</a>

<p id="down" >Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

无法弄清楚我的 div 与 jQuery 是如何淡入淡出的

Can`t figure out how fadein my div with jQuery

html

javascript

css

jquery

fadein