【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
我是JQuery新手愛好者，有時間就練練代碼，防止手生，爭取每天一個JQuery練習(xí)，在這個博客記錄下學(xué)習(xí)的筆記。
本特效主要采用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(){//對單擊"淡入顯示百度窗口"按鈕的響應(yīng)$("#myfadein").click(function(){$('IFrame').fadeIn('slow');});//對單擊"淡出隱藏百度窗口"按鈕的響應(yīng)$("#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);其中，參數(shù)speed是一個可選參數(shù)，它可以取slow，fast或毫秒值。參數(shù)callback也是一個可選參數(shù)，表示動作完成后所執(zhí)行的方法名稱。
fadeOut（）方法用于以淡出效果隱藏當(dāng)前的可見元素，該方法的語法聲明如下：
$(selector).fadeOut(speed,callback);備注：
jQuery 語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執(zhí)行"操作"（actions）。
jQuery 語法
jQuery 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作。
基礎(chǔ)語法：
$(selector).action()
美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
實例:
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素
你對 CSS 選擇器熟悉嗎？
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節(jié)，您將學(xué)習(xí)到更多有關(guān)選擇器的語法。
文檔就緒事件
您也許已經(jīng)注意到在我們的實例中的所有 jQuery 函數(shù)位于一個 document ready 函數(shù)中：
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進(jìn)行操作。
如果在文檔沒有完全加載之前就運行函數(shù)，操作可能失敗。下面是兩個具體的例子：
試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小
提示：簡潔寫法（與以上寫法效果相同）:
以上兩種方式你可以選擇你喜歡的方式實現(xiàn)文檔就緒后執(zhí)行 jQuery 方法。
轉(zhuǎn)載于:https://my.oschina.net/rhymo/blog/1831692
總結(jié)
以上是生活随笔為你收集整理的【每天一个JQuery特效】淡入淡出显示或隐藏窗口（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第十三章 对文本进行排序、单一和重复操作
- 下一篇： Objective-C初学者指南(第2版