javascript - 淡入淡出切换的 div 区域

Question

我有一个代码可以在 div 中显示更多或更少的内容，但是，由于隐藏的 div 中有很多内容，我希望它淡入和淡出。这是我到目前为止的代码，但我不知道如何实现淡入/淡出部分。

请问有什么想法吗？

<script type="text/javascript">
function toggleSeeMore() {
if(document.getElementById("hpreveal").style.display == 'none') {
    document.getElementById("hpreveal").style.display = 'block';
    document.getElementById("seeMore").innerHTML = '[-] See Less  Options';
}
else {
    document.getElementById("hpreveal").style.display = 'none';
    document.getElementById("seeMore").innerHTML = '[+] See More Options';        
}
}
</script>



<div id="hpreveal" style="display: none;">Lots of hidden content here</div>
 <a id="seeMore" onclick="toggleSeeMore()" href="javascript:void(0);">[+] See More Options</a>

Answer 1

您可以使用 CSS 将 transition 效果添加到 #textarea1 元素。不幸的是，您无法转换显示，但是，您可以转换不透明度。

请参阅下面的工作示例:

function toggleSeeMore() {
  if (document.getElementById("textarea1").style.opacity == '0') {
    document.getElementById("textarea1").style.opacity = '1';
    document.getElementById("seeMore").innerHTML = '[-] See Less  Options';
  } else {
    document.getElementById("textarea1").style.opacity = '0';
    document.getElementById("seeMore").innerHTML = '[+] See More Options';
  }
}

#textarea1 {
  opacity: 1;
  transition: opacity 1s ease-out;
}

<a id="seeMore" onclick="toggleSeeMore()" href="javascript:void(0);">[+] See More Options</a>

<div id="textarea1">
  <p>This is some text</p>
</div>

但是通过使用 jQuery 的 .toggleFade() 可以更轻松地实现这一点:

$("#seeMore").click(_ => $("#textarea1").fadeToggle(500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="seeMore" href="javascript:void(0);">[+] See More Options</a>

<div id="textarea1">
  <p>This is some text</p>
</div>