Chapter 04 01 在 按 鈕 上 附 加 hover 效 果 本 節 的 HTML 範 例 套 用 了 3 種 當 滑 鼠 移 入 移 出 按 鈕 時 的 hover 效 果 下 圖 共 有 12 個 按 鈕, 我 們 會 在 同 一 列 按 鈕 套 用 同 一 效 果, 總 共 3 種 效 果 本 節 使 用 的 HTML 範 例 檔 SampleFile /Chapter04/01/index.html 本 章 可 以 學 到 以 下 基 礎 內 容 將 效 果 套 用 至 Web 網 頁 最 重 要 的 按 鈕 元 素 針 對 多 個 元 素 ( 例 如 範 例 中 各 按 鈕 ), 個 別 套 用 同 一 效 果 更 進 一 步 的 animate() 活 用 方 法 在 第 2 章 中, 我 們 只 針 對 單 一 元 素 ( 字 串 Creative jquery ) 做 處 理, 在 本 章 則 要 處 理 同 一 頁 面 的 多 個 元 素 範 例 的 難 度 會 越 來 越 高, 請 適 時 回 頭 複 習 前 面 的 內 容 具 有 hover 效 果 的 按 鈕 不 同 首 先 來 看 如 何 替 按 鈕 加 上 hover 效 果, 總 共 有 12 個 按 鈕, 每 列 的 效 果 都
第 1 列 的 按 鈕 從 Albatross ~ Duck 1, 第 2 列 按 鈕 從 Eagle ~ Hawk 2, 第 3 行 按 鈕 從 Ibis ~ Lark 3, 而 只 有 第 3 列 按 鈕 多 設 定 span 元 素 ( 理 由 後 面 會 詳 細 說 明 ) html 具 hover 效 果 的 按 鈕 index.html <div class="page-main" role="main"> <div id="buttons1"> <h2>buttons1</h2> <div class="inner clearfix"> <button>albatross</button> <button>bishop</button> 1 <button>canary</button> <button>duck</button> <button>eagle</button> <button>falcon</button> 2 <button>goose</button> <button>hawk</button> <button>ibis<span class="bg"> <span>ibis</span></span></button> <button>jaeger<span class="bg"> <span>jaeger</span></span></button> <button>kingfisher<span class="bg"> <span>kingfisher</span></span></button> <button>lark<span class="bg"> <span>lark</span></span></button> </div> </div> </div> 3 所 有 元 素 被.page-main 類 別 包 住, 並 將 包 含 各 按 鈕 的 子 節 點 id 設 定 為 #buttons1, 現 階 段 請 先 掌 握 這 樣 的 結 構 hover 效 果 的 CSS 效 果 其 使 用 的 CSS 如 下, 之 後 將 透 過 jquery 操 作 CSS 的 屬 性 值 以 達 到 各 種 css hover 效 果 的 CSS #buttons1 button { display: block; float: left; width: 224px; height: 80px; margin: 0 10px 20px; main.css
} padding: 0; font-size: 16px; letter-spacing: 0.15em; color: #ebc000; background-color: #fff; border: none; border-radius: 20px; 第 1 列 按 鈕 的 JavaScript (jquery) 接 著 要 附 加 第 1 列 按 鈕 的 hover 效 果, 先 來 預 覽 一 下 效 果 滑 鼠 移 入 時, 逐 漸 改 變 背 景 色 滑 鼠 移 出 時, 逐 漸 回 復 背 景 色 第 1 列 按 鈕 的 hover 效 果 上 面 效 果 的 程 式 如 下, 請 開 啟 main.js 並 輸 入 JavaScript 第 1 列 按 鈕 的 JavaScript main.js $(function(){ var duration = 300; 1 // buttons1 ---------------------------------------- // buttons1 第 1 列 $('#buttons1 button:nth-child(-n+4)').on('mouseover', function() { $(this).stop(true).animate({ backgroundcolor: '#ae5e9b', color: '#fff' }, duration); }) 2.on('mouseout', function(){ $(this).stop(true).animate({ backgroundcolor: '#fff', color: '#ebc000' }, duration);
一 開 始 先 宣 告 duration 並 設 定 300 1, 這 個 值 之 後 作 為 animate() 方 法 的 第 2 個 參 數 ( 動 畫 所 需 花 費 之 時 間 ) 2 將 設 定 給 多 個 元 素 的 值 先 存 入 變 數, 之 後 就 能 作 整 體 性 的 修 改, 例 如 範 例 中 如 果 修 改 duration, 整 個 範 例 的 動 畫 時 間 就 可 一 次 性 的 調 整, 這 是 較 有 效 率 的 程 式 設 計 方 法 處 理 的 對 象 為 '#buttons1 button:nth-child(-n+4)' ( 即 #buttons1 元 素 中 的 第 1~4 的 元 素 ), 利 用 $() 指 定 元 素 後 再 利 用 on() 設 定 滑 鼠 移 入 和 移 出 的 處 理 重 要 on() 方 法 中 的 處 理 第 2 章 已 介 紹 過 詳 細 內 容 請 參 考.2 1 ; 另 外 關 於 animate() 方 法 在.2 2 stop() 方 法 的 部 分 則 在.2 33 此 程 式 的 重 點 在 於 on() 方 法 中 的 處 理 對 象 是 以 $(this) 設 定 如 前 一 章 所 介 紹, this 存 的 值 會 對 應 使 用 者 操 作 內 容, 因 此 此 程 式 的 on() 只 會 針 對 #buttons1 元 素 內 1~4 號 的 4 個 元 素 之 一 執 行 滑 鼠 移 入 移 出 的 處 理, 這 樣 就 可 以 做 到 對 多 個 處 理 對 象 執 行 同 一 處 理 Point! 變 數 uratio 的 使 用 地 方 變 數 d ration 也 可 套 用 於 第 2 列 第 3 列 的 按 鈕 之 後 內 容 如 無 特 別 說 明 請 記 得 此 變 數 用 以 控 制 動 畫 所 需 時 間 沒 有 使 用 thi 會 怎 麼 樣? 如 果 上 述 程 式 沒 有 使 用 this, 而 是 如 下 面 程 式 3, 則 會 出 現 預 期 外 的 結 果 JavaScript 沒 有 使 用 thi 的 情 況 main.js $('#buttons1 button:nth-child(-n+4)').on('mouseover', function() { $('#buttons1 button:nth-child(-n+4)').stop(true).animate({ backgroundcolor: '#ae5e9b', 3 color: '#fff' }, duration); })
上 述 程 式 仍 可 執 行, 但 不 會 區 分 滑 鼠 移 出 移 入 處 理 時 的 執 行 對 象, 4 個 元 素 皆 會 一 同 套 用 效 果 因 此, 如 果 要 針 對 同 一 種 類 的 按 鈕 做 個 別 的 效 果 套 用, 使 用 this 將 會 非 常 方 便, 本 書 中 許 多 範 例 檔 中 也 都 使 用 這 方 法, 請 各 位 好 好 參 考 學 習 第 列 按 鈕 的 JavaScript (jquery) 接 下 來 要 加 上 第 2 列 按 鈕 的 hover 效 果, 其 效 果 如 下 滑 鼠 移 入 時, 按 鈕 外 框 慢 慢 出 現 顏 色 滑 鼠 移 出 時, 顏 色 慢 慢 消 失 第 2 列 按 鈕 的 效 果 Point! 思 考 如 何 實 作! 之 後 在 進 入 範 例 程 式 之 前 請 各 位 讀 者 先 自 己 思 考 一 下 該 如 何 實 作 所 介 紹 的 功 能 不 要 一 下 子 就 看 答 案 不 然 很 容 易 就 被 下 面 所 介 紹 的 實 作 方 法 所 侷 限 上 述 效 果 的 實 作 如 下 請 開 啟 main.js 並 在 第 2 列 按 鈕 的 程 式 中 加 入 下 面 程 式 JavaScript 第 2 列 按 鈕 的 JavaScript main.js $(function(){ var duration = 300; // buttons1 第 一 列 省 略 // buttons1 第 二 列 $('#buttons1 button:nth-child(n+5):nth-child(-n+8)') 1.on('mouseover', function(){ $(this).stop(true).animate({
borderwidth: '12px', color: '#ae5e9b' }, duration, 'easeoutsine'); }).on('mouseout', function(){ $(this).stop(true).animate({ borderwidth: '0px', color: '#ebc000' }, duration, 'easeoutsine'); 2 上 述 程 式 中 針 對 5~8 個 按 鈕 做 處 理 1, 效 果 如 下 滑 鼠 移 入 時, 執 行 animate() 方 法 設 定 borderwidth 為 12px 滑 鼠 移 出 時, 執 行 animate() 方 法 設 定 borderwidth 為 0px border 顏 色 可 在 CSS(main.css) 檔 案 中 設 定 css 第 2 列 按 鈕 CSS #buttons1 button { border: solid 0px rgba(174,94,155,1.0); } main.css CSS 的 初 始 化 可 透 過 jquery 處 理, 如 果 不 須 要 jquery 動 態 設 定 的 話, 一 般 也 可 用 上 面 方 法 設 定 於 CSS 檔 案 中 範 例 中 的 animate() 方 法 使 用 了 第 3 個 參 數 easing 種 類 2, 這 裡 是 設 定 為 easeoutsine, 關 於 easing 的 種 類 及 各 種 效 果 的 預 覽, 可 參 考 第 2 章 的 說 明 第 3 列 按 鈕 的 JavaScript (jquery) 最 後 的 第 3 列 按 鈕, 這 部 分 會 提 到 先 前 未 提 及 過 的 方 法, 會 有 些 挑 戰 同 樣 先 來 預 覽 第 3 列 所 套 用 的 效 果 如 下
滑 鼠 移 入 時, 色 塊 從 左 側 滑 入 並 改 變 背 景 色 與 文 字 顏 色 滑 鼠 移 出 時, 回 復 原 狀 第 3 列 按 鈕 的 效 果 解 說 上 述 效 果 前 先 看 HTML 與 CSS HTML 中 只 有 第 3 列 按 鈕 多 加 了 span 元 素 html 第 3 列 按 鈕 的 HTML index.html <button>ibis<span class="bg"> <span>ibis</span></span></button> <button>jaeger<span class="bg"> <span>jaeger</span></span></button> <button>kingfisher<span class="bg"> <span>kingfisher</span></span></button> <button>lark<span class="bg"> <span>lark</span></span></button> 從 上 面 程 式 可 以 知 道 有 2 層 按 鈕 的 設 計, 程 式 就 是 要 針 對 內 側 span 的 按 鈕 做 處 理 CSS 中 則 對 重 疊 的 按 鈕 設 定 不 同 顏 色 1, 並 設 定 overflow:hidden; 2 css 第 3 列 按 鈕 的 CSS #buttons1 button { position: relative; } main.css #buttons1 button.bg { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; 2 } #buttons1 button span span { display: block; width: 224px;
} height: 80px; line-height: 80px; color: #fff; background-color: #ae5e9b; border-radius: 20px; 1 JavsScript 中 要 對 設 定 overflow:hidden; 的 元 素 以 動 畫 控 制 其 寬 度 請 開 啟 main.js 並 在 第 2 列 按 鈕 的 程 式 新 增 下 面 程 式 JavaScript 第 3 列 按 鈕 的 JavaScript main.js $(function(){ var duration = 300; // buttons1 第 一 列 省 略 // buttons1 第 二 列 省 略 // buttons3 第 三 列 $('#buttons1 button:nth-child(n+9)').on('mouseenter', function(){ $(this).find('> span').stop(true).animate({ 3 width: '100%' }, duration, 'easeoutquad'); }).on('mouseleave', function(){ $(this).find('> span').stop(true).animate({ width: '0%' }, duration, 'easeoutquad'); 上 面 程 式 用 到 一 個 新 方 法 find() 3, 其 功 能 為 以 選 擇 器 條 件 對 jquery 物 件 各 元 素 之 子 元 素 為 對 象 進 行 限 縮 範 例 中 的 find() 方 法 設 定 span 元 素 做 為 參 數, 限 定 處 理 對 象 為 重 疊 的 按 鈕 (span 元 素 內 的 按 鈕 ) 語 法 find() 方 法 find(' 限 縮 選 擇 器 ')
這 樣 藉 由 改 變 on() 方 法 與 animate() 方 法 的 處 理 對 象 就 可 以 實 作 橫 向 色 塊 滑 動 的 動 畫 效 果 另 外 要 注 意 的 就 是 方 法 鏈 中 如 果 使 用 find() 方 法, 則 find() 方 法 前 後 所 處 理 的 元 素 對 象 是 不 同 的 Point! () 函 式 和 i () 方 法 的 差 異 () 是 以 選 擇 器 針 對 HTML 文 件 整 體 限 縮 元 素 而 find() 方 法 則 是 對 er 物 件 的 子 元 素 做 限 縮 請 比 較 下 面 各 種 寫 法 其 變 數 中 所 放 的 er 物 件 都 是 相 同 的 JavaScript 元 素 限 縮 方 法 的 差 異 var same1 = $('#buttons1 button > span'); var same2 = $('#buttons1 button'). fi n d ('> span'); var same3 = $('#buttons1'). fi n d ('button'). fi n d ('> span');