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>