1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JQuery: slideDown与slideUp

JQuery: slideDown与slideUp

时间:2023-06-27 22:23:00

相关推荐

JQuery: slideDown与slideUp

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>

对于隐藏的元素,可以显示,在过程中,可以变化动画效果。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。