Javascript - 显示带有幻灯片效果的隐藏 div答案

【问题标题】：Javascript - Show Hidden div with slide effectJavascript - 显示带有幻灯片效果的隐藏 div
【发布时间】：2018-09-18 23:08:07
【问题描述】：

如何添加幻灯片效果来显示隐藏的 div ？

  	function show() {
    var x = document.getElementById("info");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
	}

<a onclick="show()"> Test </a>

<div id="info" style="display:none;">
   <a href="" >1111111111111111111111111111111</a>
</div>

提前谢谢你。

【问题讨论】：

您可以使用 CSS 过渡、jQuery 动画或编写您自己的普通 JavaScript 代码来循环和更改 div 的位置。但是，我认为您没有尝试完成此操作。
stackoverflow.com/questions/40446658/…
JavaScript - add transition between display:none and display:block的可能重复
贴出你试过的CSS

标签： javascript html css

【解决方案1】：

我找到了一种使用 jquery 3.3.1 的方法：

$(document).ready(function(){
	  $("#show").click(function(){
		  $("#info").toggle(300);
	  });
  });

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a href="#" id="show">SHOW HIDDEN DIV</a>

<div id="info" style="display:none;">I WAS HIDDEN</div>

【讨论】：