Jquery淡入淡出不起作用，我找不到问题的解决方案

Question

>我似乎无法在我的h1元素上获得jQuery淡入淡出。我已经检查了jQuery是否已通过使用警报消息激活，但它似乎不适用于该元素。

网页代码：

<div id="f1" class="banner-quote">
<h1>"text"</h1>
</div>

JQUERY代码：

<script type="text/javascript">
$(document).ready(function(){
$("#f1").fadeIn(1000);
});
</script>

它可能是与我的 CSS 有关的东西，还是代码中缺少某些内容？

Answer 1

默认使用display: none将 CSS 设置为 。 否则，不显示淡入效果

$(document).ready(function() {
$("#f1").fadeIn(1000);
});

#f1{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="f1" class="banner-quote">
<h1>"text"</h1>

Answer 2

fadeIn()不会隐藏你的html元素，它会显示它。

从fadeIn()官方文档中，它的作用是

通过将匹配的元素淡入不透明来显示它们。

您可能正在寻找的是fadeOut().

看看这个小提琴。