HZY
SlideDown和slideUp是JQuery中的方法
SlideDown是通过高度变化(向下增大)来动态地显示所有匹配的元素
SlideDown有三个参数
speed:动画时长的毫秒数值
easing:指定切换效果,默认swing
fn在动画完成时执行的函数,每个元素执行一次。
下面是制作的效果图
展开之前display:none;/*隐藏*/
展开后
下面的是代码
<style>.JQuery{width:500px;height:500px;border:2px solid #ff0000;background:#00ffff;margin-left:500px;text-align:center;display:none;}.JQbtn{text-align:center;}button{margin:10px;background:#ffd800;border:none;border-radius:10px;font-size:18px;color:#00ff21;} </style></head><body><div class="JQuery">JQuery</div><div class="JQbtn"><button class="btn" id="downbtn">展开</button><button class="btn" id="upbtn">收起</button></div><script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.js"></script><script>//展开按钮$("#downbtn").click(function () {$(".JQuery").slideDown(5000);});//收起按钮$("#upbtn").click(function () {$(".JQuery").slideUp(5000);});</script></body>
对于隐藏的元素,可以显示,在过程中,可以变化动画效果。