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靜态資源