站長資訊網
實現方法：1、用css()給元素添加visibility樣式，設置不可見，語法“元素對象.css('visibility','hidden');”；2、用css()將元素的透明度設置為0，語法“元素對象.css('opacity',0)”。
本教程操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
實現占位置隱藏元素可以兩種方法：
-
給元素添加
visibility: hidden;樣式 -
給元素添加
opacity: 0樣式
在jquery中，可以使用css()方法來實現上面的效果：
1、使用css()給元素添加visibility樣式，設置不可見
<!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>
說明：
visibility 屬性規定元素是否可見。
這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍占據其本來的空間，不過可以完全不可見。值 collapse 在表中用于從表布局中刪除列或行。
方法2：使用css()將元素的透明度設置為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>
說明：
opacity 屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。
這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用。這和上面的visibility: hidden 相似。
相關教程推薦：jQuery視頻教程
