1. 首頁 > 生活 > >

免費的jquery特效大全 jquery特效的設計與制作

小知識



文章插圖
免費的jquery特效大全 jquery特效的設計與制作

文章插圖

本節我們來學習如何使用 jQuery 中的方法來實現元素的顯示與隱藏效 。
hide()方法
【免費的jquery特效大全 jquery特效的設計與制作】hide() 方法用于隱藏指定的元素，與 CSS 中的 display:none 效果類似 。
語法如下所示：
$(selector).hide(speed,easing,callback)speed：可選，規定隱藏效果的速度 ?？蛇x值為 slow、fast、毫秒 。easing：可選，規定在動畫的不同點上元素的速度，可選值為 swing、linear 。callback：可選，hide() 方法執行完之后，要執行的函數 。示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_俠課島(9xkd.com)</title><script src="http://www.mnbkw.com/jxjc/190168/jquery-3.5.1.min.js"></script><script>$(function(){$("button").click(function(){$(".fruit").hide('slow','linear');});});</script></head><body><div><button>隱藏下面內容</button><div class="fruit"><p>我喜歡的水果：</p><ul><li>西瓜</li><li>蘋果</li><li>香蕉</li><li>桃子</li><li>哈密瓜</li></ul></div></div></body></html>在瀏覽器中的演示效果：
show()方法
show() 方法用于顯示隱藏的指定元素 。與 CSS 中 display:none 的效果類似 。
語法如下所示：
$(selector).show(speed,easing,callback)show() 方法中的參數和 hide() 方法中參數類似 。
示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_俠課島(9xkd.com)</title><script src="http://www.mnbkw.com/jxjc/190168/jquery-3.5.1.min.js"></script><script>$(function(){$(".hide").click(function(){$(".fruit").hide('slow','linear');});$(".show").click(function(){$(".fruit").show('slow','linear');});});</script></head><body><div><button class="hide">隱藏下面內容</button><button class="show">顯示下面內容</button><div class="fruit"><p>我喜歡的水果：</p><ul><li>西瓜</li><li>蘋果</li><li>香蕉</li><li>桃子</li><li>哈密瓜</li></ul></div></div></body></html>在瀏覽器中的演示效果：
toggle()方法
上面示例中我們在實現顯示和隱藏效果時，需要使用兩個按鈕分別控制 。那么有沒有辦法只通過一個按鈕就可以實現顯示和隱藏效果呢 。這就需要用到 toggle() 方法了，toggle() 方法可以用于切換 hide() 和 show() 方法 。
語法如下所示：
$(selector).toggle(speed,callback,switch)speed：可選，規定元素從可見到隱藏的速度，可選值又slow、normal、fast、毫秒 。callback：可選，toggle 函數執行完之后，要執行的函數 。switch：可選，規定 toggle 是否隱藏或顯示所有被選元素 。True 表示顯示所有元素，False 表示隱藏所有元素 。如果設置此參數，則無法使用 speed 和 callback 參數 。示例：
例如實現上述示例效果，我們只需要像下面這樣寫即可，主要是修改 jQuery 代碼部分：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_俠課島(9xkd.com)</title><script src="http://www.mnbkw.com/jxjc/190168/jquery-3.5.1.min.js"></script><script>$(function(){$(".toggle").click(function(){$(".fruit").toggle(1000);});});</script></head><body><div><button class="toggle">切換顯示與隱藏</button><div class="fruit"><p>我喜歡的水果：</p><ul><li>西瓜</li><li>蘋果</li><li>香蕉</li><li>桃子</li><li>哈密瓜</li></ul></div></div></body></html>在瀏覽器中的演示效果：
我們來看一下區別，使用 show() 和 hide() 方法需要的代碼：
$(function(){$(".hide").click(function(){$(".fruit").hide('slow','linear');});$(".show").click(function(){$(".fruit").show('slow','linear');});});使用 toggle() 方法需要的代碼：
$(function(){$(".toggle").click(function(){$(".fruit").toggle(1000);});});所以很明顯，在需要實現隱藏和顯示兩種效果相互切換時，使用 toggle() 方法是很方便的 。