網頁教學 | jQuery 實作淡入淡出(fade in、fade out) 動畫教學

Written by on in 程式教學

Deprecated: Return type of TagFilterNodeIterator::current() should either be compatible with Iterator::current(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1149

Deprecated: Return type of TagFilterNodeIterator::next() should either be compatible with Iterator::next(): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1159

Deprecated: Return type of TagFilterNodeIterator::key() should either be compatible with Iterator::key(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1154

Deprecated: Return type of TagFilterNodeIterator::valid() should either be compatible with Iterator::valid(): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1144

Deprecated: Return type of TagFilterNodeIterator::rewind() should either be compatible with Iterator::rewind(): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1139

Deprecated: Return type of TagFilterNodeIterator::count() should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/naomindc/public_html/stylengineer/wp-content/plugins/easy-table-of-contents/includes/vendor/ultimate-web-scraper/tag_filter.php on line 1164

應用 jQuery 實作網頁淡入淡出動畫

背景知識介紹

HTML 格式
標準的 HTML 文件可以分為三個主要區塊：<head>、<body> 和 <script>。每個區塊有不同的功能：

  • <head> 包含了網頁的 metadata，比如標題、連結到外部樣式表（CSS）、引入 JavaScript 檔案、或其他一些描述網頁的訊息。
  • <body> 包含了實際的網頁內容，比如文字、圖片、連結等。
  • <script> 則是用來放置 JavaScript 程式碼，也可以放在文件的 <head> 或 <body> 部分，可以根據開發者的習慣決定放置處。

CDN (Content Delivery Network)
CDN 代表 Content Delivery Network，中文稱為內容交付網路。它是一種分散式的伺服器系統，CDN 通常用於存儲靜態資源，如圖片、樣式表、腳本等，並將這些資源分發到離用戶更近的伺服器上，以減少請求的延遲時間。

簡單來說，我們可以在網頁中載入加入不同網頁框架提供的 CDN 網址. 就可以從網路上以最快的速度下載並且使用框架，例如: Bootstrap、jQuery 都有提供自己的CDN。

程式碼實作教學

① 在 <head> block 中加入程式碼
– 引入 Bootstrap CDN, 這樣後續才能使用按鈕群組樣式
– 引入 jQuery CDN, 這樣後續才能在程式碼中使用 jQuery 語法套用 jQuery 淡入淡出動畫

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

② 在 <body> block 中加入第一段程式碼
– 加入套用 Bootrap 的按鈕群組 (button group) 樣式, 這裡總共套用三組 class: btn-group

<div id="myElement" class="btn-group fade show" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

 

③ 在<body> block 中加入第二段程式碼

<div class="row">
    <button onclick="fadeInElement()">fade in</button>
    <button onclick="fadeOutElement()">fade out</button> 
            
</div>

④ 在 script block 中, 加入程式碼

<script>
    function fadeInElement() {
    $('#myElement').fadeIn();
    }

    function fadeOutElement(){
    $('#myElement').fadeOut();
    }     
</script>
Post Views: 350