html 利用jq隐藏p,jq简单实现切换隐藏与显示并执行函数

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元素html>

点击‘隐藏’按钮我可以消失哦

隐藏

$("#hide").click(function(){

$("p").hide(1000);

});

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静态资源