jq简单实现切换隐藏与显示并执行函数
夏蝉 前端设计 48阅读
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>