Javascript 淡入淡出切换的div区域

我有一个代码来显示一个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>

函数toggleSeeMore（）{
if（document.getElementById（“hpreveal”）.style.display==“无”）{
document.getElementById（“hpreveal”）.style.display='block'；
document.getElementById（“seeMore”）.innerHTML='[-]查看较少的选项'；
}
否则{
document.getElementById（“hpreveal”）.style.display='none'；
document.getElementById（“seeMore”）.innerHTML='[+]查看更多选项'；
}
}
这里有很多隐藏的内容

您可以使用CSS将

转换

效果添加到

#textarea1

元素中。不幸的是，您无法转换

显示

，但是，您可以转换

不透明度

请参见下面的工作示例：

函数切换seemore（）{
if（document.getElementById（“textarea1”）.style.opacity==“0”）{
document.getElementById（“textarea1”）.style.opacity='1'；
document.getElementById（“seeMore”）.innerHTML='[-]查看较少的选项'；
}否则{
document.getElementById（“textarea1”）.style.opacity='0'；
document.getElementById（“seeMore”）.innerHTML='[+]查看更多选项'；
}
}

#文本区域1{
不透明度：1；
过渡：不透明度1s缓解；
}

这是一些文本

在这里，我们使用切换完成淡入后隐藏

$（“#查看更多”）。单击（#=>$（“#文本区域1”）。fadeToggle（500，函数（）{
document.querySelector（'#textarea1'）.classList.toggle（'hide'）；
}));
.hide{
显示：无；
}

这是一些文本

更多文本
您想如何将流出的div返回到文本流？嗨，尼克，谢谢您的回答。代码是有效的，但是如果你能帮我的话，有两个问题。首先，我需要在第一个视图中隐藏内容。第二个问题是，虽然内容逐渐淡出，但在内容原来的位置留下了很大的空白。你知道如何解决这个问题吗？Jase，当淡入淡出完成时，jQuery版本接受一个函数。为什么不在那里设置display为none？