jq简单实现切换隐藏与显示并执行函数
墨初 前端设计 5540阅读
HTML前端的很多的动画效果,都是靠js(javascript)来完成的,而作为js的一个功能的封装插件jq(jquery),可以很方便的通过调用函数的方式,来实现一些功能,这也加快了前端的开发速度。
今天就说说利用JQ中封装的hide()方法和show()方法对HTML DOM 中的DIV元素实现隐藏与显示之间的切换,并在切换完成时调用函数。
jQuery hide() 和 show()方法
语法:
$(selector).hide(speed,callback); //隐藏元素 $(selector).show(speed,callback); //显示元素
speed:参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
callback:参数是隐藏或显示完成后所执行的函数名称。
举例
利用JQ隐藏一个DIV元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script> </head> <body> <p>点击‘隐藏’按钮我可以消失哦</p> <button id="hide" type="button">隐藏</button> <script type="text/javascript"> $("#hide").click(function(){ $("p").hide(1000); }); </script> </body> </html>
DIV元素隐藏后,弹出提示
$("#hide").click(function(){ $("p").hide(1000,function(){ alert('我隐藏了,哈哈'); }); });
利用JQ显示一个隐藏的DIV元素
JQ中显示一个DIV元素的show()方法与隐藏一个DIV元素的hide()方法使用过程是一样的。
例:JQ显示一个元素,并弹出提示
$("#hide").click(function(){ $("p").show(1000,function(){ alert('我出来了,哈哈'); }); });
jQuery toggle()方法
JQ中内置了一个toggle()方法可以很方便切换hide()和show()方法。
toggle()方法,可以在隐藏显示的元素,也可以显示隐藏的元素,也可以使同一个DIV元素在显示与隐藏之间进行切换。
语法:
$(selector).toggle(speed,callback);
speed:参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
callback:参数是隐藏或显示完成后所执行的函数名称。
例:利用JQ来实现一个DIV元素的显示与隐藏
代码:
$("#hide").click(function(){ $("p").toggle(1000); });
注意事项:
调用JQ方法之前,必须要引拉JQusry库,如上面代码中所引用的CDN静态资源
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>