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元素中。不幸的是，您不能转换display，但是可以转换opacity。

请参见下面的工作示例：

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>

Answer 2

在这里，一旦使用淡入淡出功能，我们就会隐藏起来。

$("#seeMore").click(_ => $("#textarea1").fadeToggle(500, function() {
  document.querySelector('#textarea1').classList.toggle('hide');
}));

.hide {
  display: none;
}

<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>
<p>More Text</p>

淡入或淡出切换的div区域

2 个答案: