【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
為什么80%的碼農都做不了架構師？>>> ??
我是JQuery新手愛好者，有時間就練練代碼，防止手生，爭取每天一個JQuery練習，在這個博客記錄下學習的筆記。
本特效主要采用fadeIn（）和fadeOut（）方法顯示淡入淡出的顯示效果顯示或隱藏元素。具體效果如下圖：
主要代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>day 01 以淡入淡出的效果顯示或隱藏元素</title><script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(document).ready(function(){//對單擊"淡入顯示百度窗口"按鈕的響應$("#myfadein").click(function(){$('IFrame').fadeIn('slow');});//對單擊"淡出隱藏百度窗口"按鈕的響應$("#myfadeout").click(function(){$('IFrame').fadeOut('slow');});});</script></head><body><p style="text-align: center;margin-top:15px;"><input type="button" class="input" name="" id="myfadein" value="淡入顯示百度窗口" style="width: 190px;"/><input type="button" class="input" name="" id="myfadeout" value="淡出隱藏百度窗口" style="width: 190px;"/></p><p style="text-align: center;margin-top: 5px;"><iframe src="https://www.baidu.com" width="800" height="300" style="border: 1px solid gray;"></iframe></p></body> </html>在代碼中,fadeIn()方法用于以淡入效果顯示已隱藏的元素，該方法的語法聲明如下：
$(selector).fadeIn(speed,callback);其中，參數speed是一個可選參數，它可以取slow，fast或毫秒值。參數callback也是一個可選參數，表示動作完成后所執行的方法名稱。
fadeOut（）方法用于以淡出效果隱藏當前的可見元素，該方法的語法聲明如下：
$(selector).fadeOut(speed,callback);備注：
jQuery 語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執行"操作"（actions）。
jQuery 語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。
基礎語法：
$(selector).action()
美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作
實例:
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素
你對 CSS 選擇器熟悉嗎？
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。
文檔就緒事件
您也許已經注意到在我們的實例中的所有 jQuery 函數位于一個 document ready 函數中：
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：
試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小
提示：簡潔寫法（與以上寫法效果相同）:
以上兩種方式你可以選擇你喜歡的方式實現文檔就緒后執行 jQuery 方法。
轉載于:https://my.oschina.net/rhymo/blog/1831692
總結
以上是生活随笔為你收集整理的【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第十三章 对文本进行排序、单一和重复操作
- 下一篇： Objective-C初学者指南(第2版