# 四、看看還有哪些動畫效果可以使用

## 4-18 使用 Slide 設計滑動效果

調整 height、padding-top、padding-bottom

```markup
<input type="button" value="留言" class="button">
<div class="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">  
</div>



<style>
.text {
  display: none;
  padding: 10px;
}
</style>

<script>
$(document).ready(function () {
  $('.button').click(function (e) { 
    e.preventDefault();
    $('.text').slideToggle(2000);
  });
});
</script>
```

## 4-19 使用 Fade 設計淡入淡出效果

```javascript
$('.text').fadeToggle(5000);


// fadeIn() 把東西顯示出來
// fadeOut() 把東西隱藏
```

調整 opacity

## 4-20 都不喜歡？那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧！

```markup
  <input type="button" value="留言" class="button">
  <div class="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">
  </div>

  <style>
    .text {
    opacity: 0;
    transition: all 3s;
    }

    .text.active {
    opacity: 1;
    }
  </style>

  <script>
      $(document).ready(function () {

        $('.button').click(function (e) { 
            e.preventDefault();
            $('.text').toggleClass('active')
        });

    }); 
  </script>
```

CSS 選擇器觀念

* [\[技術分享\] CSS 中的多重選擇器（Multiple Selectors）包含空白或逗號 \~ PJCHENder\
  &#x20;那些沒告訴你的小細節](https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html)
* [CSS 選擇器筆記 - 阮一峰的網絡日志](http://www.ruanyifeng.com/blog/2009/03/css_selectors.html)
* [CSS 選擇器參考手冊](http://www.w3school.com.cn/cssref/css_selectors.asp)

transition

* `transition: property duration timing-function delay;`
* 要改變的屬性，預設是 all；改變的時間；轉場效果；延遲多開始
* [如何使用 CSS3 Transition](http://blog.fukuball.com/css3-transition/)
* [CSS3 transition 屬性 - Wibibi](http://www.wibibi.com/info.php?tid=CSS3_transition_%E5%B1%AC%E6%80%A7)
* [CSS3 Transition\_transition, css3 屬性詳解 教程\_w3cplus](https://www.w3cplus.com/content/css3-transition)
* [CSS3 transition 屬性](http://www.w3school.com.cn/cssref/pr_transition.asp)

## 4-21 設定 CSS 動畫小密技：overflow、CSS3 transition

先談一下 css 的技巧

See the Pen [HW4-24 設定CSS動畫小密技](https://codepen.io/ayugioh2003/pen/ERyRvg/) by Chiu ([@ayugioh2003](https://codepen.io/ayugioh2003)) on [CodePen](https://codepen.io).

* [HW4-24 設定 CSS 動畫小密技](https://codepen.io/ayugioh2003/pen/ERyRvg?editors=1100)

```css
.box1 {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
  overflow: hidden;
}

.title1 {
  background: #115;
  color: #fff;;
  text-align: center;
  padding: 5px 0;
  margin-left: 30px;
  width: 100%;

}


.box2 {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
  position: relative;
  overflow: hidden;
}
.box2:hover .title2 {
  bottom: 0;
}

.title2 {
  background: #115;
  color: #fff;;
  text-align: center;
  padding: 5px 0;
  width: 100%;

  position: absolute;
  bottom: -40px;
  transition: all 1s;

}
```

手機上 hover 會換轉換成 touch 嘛？手機會不會看不到隱藏內容

* 在手機呈現，還需要設計 click 事件。
* 雖然手點擊時也會順道觸發 hover 事件，但實際上也要看設計動線

假圖工具

* fakeimg.pl (color block with text)、picsum.photos (random high quality photo)
* [\[資源\] 假圖產生器 Fake Image Placeholder \~ PJCHENder\
  &#x20;那些沒告訴你的小細節](https://pjchender.blogspot.com/2016/10/fake-image-placeholder.html)
* [yoyoys/fake-img-snippet-collection: Snippets Collection for many web-services](https://github.com/yoyoys/fake-img-snippet-collection)
* [jessy1092/fake-image-snippets: Fake image please! snippets for Atom](https://github.com/jessy1092/fake-image-snippets)

## 4-22 jQuery 鏈式寫法

想做到隱藏起來，然後再打開。jQuery 可以連接動畫效果

* [HW 4-22 jQuery 鏈式寫法](https://codepen.io/ayugioh2003/pen/bKejvp)
* ctrl+x 可以刪除一整行

## 4-23 試用 chrome 內建開發工具，提昇撰寫 jQuery 效率

* 到 source 看 js 碼
* 修改完變項後，按 ctrl + s 儲存，再觀看效果
* source 會把 js 執行一遍，並綁定事件

## 測驗3: 第三章測驗

![第三章測驗](https://i.imgur.com/80MOJfB.png)