淡入、淡出範例
以下範例會先顯示一張半透明圖片：
- 初始狀態：`opacity: 0.5`
- 滑鼠移入：圖片淡入至完全不透明
- 滑鼠移出：圖片淡出回半透明狀態
## 完整範例
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片淡入淡出效果</title>
<style>
.image-box {
width: 400px;
margin: 50px auto;
text-align: center;
}
.fade-image {
width: 100%;
display: block;
/* 初始為半透明 */
opacity: 0.5;
/* 設定淡入、淡出動畫時間 */
transition: opacity 0.8s ease;
}
/* JavaScript 加上 active 後，圖片變成完全不透明 */
.fade-image.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="image-box">
<img
id="myImage"
class="fade-image"
src="https://picsum.photos/800/500"
alt="示範圖片"
>
</div>
<script>
const image = document.getElementById("myImage");
// 滑鼠移入圖片時，加入 active 類別
image.addEventListener("mouseenter", function () {
image.classList.add("active");
});
// 滑鼠移出圖片時，移除 active 類別
image.addEventListener("mouseleave", function () {
image.classList.remove("active");
});
</script>
</body>
</html>
```
## 運作原理
### 1. HTML
```html
<img id="myImage" class="fade-image" src="圖片網址" alt="示範圖片">
```
`img` 元素用來顯示圖片，並設定：
- `id="myImage"`：讓 JavaScript 找到這張圖片
- `class="fade-image"`：套用 CSS 樣式
### 2. CSS
```css
.fade-image {
opacity: 0.5;
transition: opacity 0.8s ease;
}
```
- `opacity: 0.5`：圖片一開始呈現半透明
- `transition: opacity 0.8s ease`：讓透明度變化在 0.8 秒內平滑完成
當圖片具有 `active` 類別時：
```css
.fade-image.active {
opacity: 1;
}
```
圖片會變成完全不透明。
### 3. JavaScript
滑鼠移入時：
```javascript
image.classList.add("active");
```
加入 `active` 類別，觸發淡入效果。
滑鼠移出時：
```javascript
image.classList.remove("active");
```
移除 `active` 類別，回到 `opacity: 0.5`，產生淡出效果。
## 更簡潔的做法：只使用 CSS
如果不一定要使用 JavaScript，也可以直接使用 CSS 的 `:hover`：
```html
<img class="fade-image" src="https://picsum.photos/800/500" alt="示範圖片">
```
```css
.fade-image {
width: 400px;
opacity: 0.5;
transition: opacity 0.8s ease;
}
.fade-image:hover {
opacity: 1;
}
```
這種方式效果相同，但使用 JavaScript 的版本更方便日後加入其他互動功能，例如點擊圖片、切換圖片或控制動畫狀態。
相關學習地圖、教學課程
F2E 網站前端工程