站長(zhǎng)資訊網(wǎng)
實(shí)現(xiàn)方法：1、用css()給元素添加visibility樣式，設(shè)置不可見(jiàn)，語(yǔ)法“元素對(duì)象.css('visibility','hidden');”；2、用css()將元素的透明度設(shè)置為0，語(yǔ)法“元素對(duì)象.css('opacity',0)”。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
實(shí)現(xiàn)占位置隱藏元素可以兩種方法：
-
給元素添加
visibility: hidden;樣式 -
給元素添加
opacity: 0樣式
在jquery中，可以使用css()方法來(lái)實(shí)現(xiàn)上面的效果：
1、使用css()給元素添加visibility樣式，設(shè)置不可見(jiàn)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $(".visibility").css("visibility","hidden"); }); }); </script> </head> <body> <div>正常顯示元素</div> <div class="visibility">隱藏元素</div> <div>正常顯示元素</div> <br> <button>占位置隱藏元素</button> </body> </html>
說(shuō)明：
visibility 屬性規(guī)定元素是否可見(jiàn)。
這個(gè)屬性指定是否顯示一個(gè)元素生成的元素框。這意味著元素仍占據(jù)其本來(lái)的空間，不過(guò)可以完全不可見(jiàn)。值 collapse 在表中用于從表布局中刪除列或行。
方法2：使用css()將元素的透明度設(shè)置為0
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $(".opacity").css('opacity',0); }); }); </script> </head> <body> <div>正常顯示元素</div> <div class="opacity">隱藏元素</div> <div>正常顯示元素</div> <br> <button>占位置隱藏元素</button> </body> </html>
說(shuō)明：
opacity 屬性的意思是設(shè)置一個(gè)元素的透明度。它不是為改變?cè)氐倪吔缈颍╞ounding box）而設(shè)計(jì)的。
這意味著將 opacity 設(shè)為 0 只能從視覺(jué)上隱藏元素。而元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁(yè)的布局起作用。這和上面的visibility: hidden 相似。
相關(guān)教程推薦：jQuery視頻教程
