【天天一個JQuery特效】淡入淡出顯示或隱藏窗口（1）

時間 2019-11-06

原文原文鏈接

我是JQuery新手愛好者，有時間就練練代碼，防止手生，爭取天天一個JQuery練習，在這個博客記錄下學習的筆記。javascript

本特效主要採用fadeIn（）和fadeOut（）方法顯示淡入淡出的顯示效果顯示或隱藏元素。具體效果以下圖：html

主要代碼以下：java

<!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()方法用於以淡入效果顯示已隱藏的元素，該方法的語法聲明以下：jquery

$(selector).fadeIn(speed,callback);

其中，參數speed是一個可選參數，它能夠取slow，fast或毫秒值。參數callback也是一個可選參數，表示動做完成後所執行的方法名稱。ide

fadeOut（）方法用於以淡出效果隱藏當前的可見元素，該方法的語法聲明以下：函數

$(selector).fadeOut(speed,callback);

備註：學習

jQuery 語法
經過 jQuery，您能夠選取（查詢，query） HTML 元素，並對它們執行"操做"（actions）。this

jQuery 語法
jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。spa

基礎語法：3d

$(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 函數中：

$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼，即在 DOM 加載完成後才能夠對 DOM 進行操做。

若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
得到未徹底加載的圖像的大小
提示：簡潔寫法（與以上寫法效果相同）:

$(function(){
 
   // 開始寫 jQuery 代碼...
 
});

以上兩種方式你能夠選擇你喜歡的方式實現文檔就緒後執行 jQuery 方法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。