HTML前端的很多的動畫效果,都是靠js(javascript)來完成的,而作為js的一個功能的封裝插件jq(jquery),可以很方便的通過調用函數的方式,來實現一些功能,這也加快了前端的開發速度。

国产视频app今天就說說利用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="http://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()方法使用過程是一樣的。

国产视频app例: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="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>