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

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

調整 height、padding-top、padding-bottom

<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 設計淡入淡出效果

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


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

調整 opacity

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

  <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 那些沒告訴你的小細節

• CSS 選擇器筆記 - 阮一峰的網絡日志

• CSS 選擇器參考手冊

transition

• transition: property duration timing-function delay;

• 要改變的屬性，預設是 all；改變的時間；轉場效果；延遲多開始

• 如何使用 CSS3 Transition

• CSS3 transition 屬性 - Wibibi

• CSS3 Transition_transition, css3 屬性詳解 教程_w3cplus

• CSS3 transition 屬性

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

先談一下 css 的技巧

See the Pen HW4-24 設定CSS動畫小密技 by Chiu (@ayugioh2003) on CodePen.

• HW4-24 設定 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 那些沒告訴你的小細節

• yoyoys/fake-img-snippet-collection: Snippets Collection for many web-services

• jessy1092/fake-image-snippets: Fake image please! snippets for Atom

4-22 jQuery 鏈式寫法

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

• HW 4-22 jQuery 鏈式寫法

• ctrl+x 可以刪除一整行

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

• 到 source 看 js 碼

• 修改完變項後，按 ctrl + s 儲存，再觀看效果

• source 會把 js 執行一遍，並綁定事件

測驗3: 第三章測驗

第三章測驗