五、教你如何搭配 CSS、jQuery 各式各樣的動畫效果

5-24 使用 preventDefault() 取消默認行為

有時想呈現動畫效果，不會用按鈕，會用連結 但連結的預設效果是，會傳送網址 如果不想讓 a 有傳送網址的行為的話 這時就可以用 preventDafult() 來取消預設行為

<body>
  <div class="wrap">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
    <a class="close" href="https://www.google.com.tw">連結</a>
    <div class="box"></div>
  </div>

</body>




<style>

.box {
  height: 500px;
  background: #000;
}

</style>



<script>

$(document).ready(function () {

  $('.close').click(function (e) { 
    e.preventDefault();
    $('.box').slideUp();
  });

});

</script>

5-25 preventDefault 程式碼範例

$(document).ready(function() {
 $('.close').click(function(event) {
   event.preventDefault();
   $('.box').slideUp();
 });
});

5-26 css() - 教你如何動態載入 CSS style 設定

用 JS 載入的 css 是 inline，權重較高 iice: inline>id>class>element

老師比較喜歡用 remove, add, toggle class 來切換 css 但有些情況可能需要動態的知道瀏覽器寬度多少

$('.box').css('width', '20px');

jQuery 不同版本 api 有差異

jQuery 的鏈式

5-27 設計下拉式收關選單

滑鼠移動到連結時，會展開往下的選單

第一步驟，先完成滑鼠 hover 後會自動展開

第二步驟，用 js 控制

  • 先在訂單查詢 div 加上 .dropdown

  • 訂單查詢下層的 ul 加上 .dropdown-open

展開訂單查詢的子選單後，想讓訂單查詢按鈕保持藍底的樣式

同學提問

滿版設計

如何按其他 menu 時，之前的會收起來

如何讓出現的子選單覆蓋在下面的 banner 圖片上

若有兩層的多個子選單 如何讓 $('.dripdown-open').slideToggole 一次只開出被點選的 .dropdown，而不是全都出來 用 $('this').toggleClass('active') 似乎有用

在點擊選單後，如何點擊其他地方達成收起效果

hover 效果自動關閉選單

  • Hello shin，我這裡寫了個純 CSS 範例給你參考，因為通常來說 比較少會做click事件，移出hover就自動關閉，

    這點比較傾向用 純css直接做hover效果比較單純，如果硬要做就可以，你可以看這裡的 events 區塊，裡面的 mouseout就可以做滑鼠移出的事情哩，但以下拉式選單的案例來說比較麻煩，因為他是li裡面的a連結外又包了 ul，所以以這case來講實作上可能要思考一下，也提供給你參考哩 :D

  • A Pen by gonsakon

  • jQuery Cheat Sheet

我的問題

  • 沒有加 clearfix，是因為讓子選單刻意破版嗎

5-28 delay()-延遲動畫效果的好用語法

讓動畫先後呈現 emmet 用 $ 字號可以自動產生流水號 show() 沒有寫內容的話，會直接出現，不理會 delay

為什麼按鈕絕對定位 left:50 了卻沒置中效果

CSS 的 transition duration 和 delay 效果

  • duration 是動畫持續效果，delay 是動畫延遲效果。

  • Tryit Editor v3.5

  • delay() 用在 jQuery，剛剛的都是用在 CSS

5-29 即時縮放縮小字型好簡單

點大中小，能即時縮放字型

5-30 fixed 固定網頁內容

彈出視窗、廣告怎麼做 可能固定在左下角

abosolute 在動畫效果常見，可定位在父元素的特定位置

abosolute 和 fixed 的差異

fixed 也能做固定於右下方，點擊後能回上方的效果?

$('.scrollTop').click(function() {
  $('html, body').animate({
    scrollTop: 0
  }, 800);
});

5-31 使用 stop() 讓你的動畫效果更華順

希望動畫執行中，能強制開始下一個動畫

是否有能中斷就停在那邊，按鈕後從原本地方再繼續動作

  • jQuery stop and animate

  • 程式碼是什麼意思

    ```js

    $('.animated').click(function(){

    $('.box').animate(

    {left: '+=600'} // CSS 的位移 600px

    , 10000); // 10 秒鐘的動畫時間

    });

// 一個按鈕滿足兩個需求 $('.one').click(function(){ if ($('.box').is(':animated')) { // 如果是動畫的狀態 $('.box').stop(); } else { // 除了 if 以外的狀態 $('.box').animate({left: '+=600'}, 10000); } });

* :animated 是 jQuery 的動畫選擇器

## 5-32 設定 offcanvas 左右選單切換

奇摩手機版，選單有打開後覆蓋整個畫面的效果。如何達成?

能用 css 達成的效果，就用 css 
利用動態載入 class，透過 transition、tranform 達成效果

* [HW5-32 設定 offcanvas 左右選單切換 | jQuery](https://codepen.io/ayugioh2003/pen/gKgqmL)

transition 要放在哪?
* 會需要動畫效果的元素，都要放

用 position 的效果如何?
* [jQuery](https://codepen.io/NIERIKE/pen/LmjXNO?editors=1100)
* transition 效能比較好

按完按鈕後，選單跑出，按鈕隱藏，如何有延遲效果
* 原 [offcanvas](https://codepen.io/Edann/pen/RLoXNJ?editors=1010)
* 有個作法，fadeout 可以下第二個參數
* [offcanvas](https://codepen.io/liao/pen/OxWXJj)
* 平常可參考說明文件
* [jQuery Cheat Sheet](https://oscarotero.com/jquery/)


在.aside的css介紹時，您說
```css
position: absolute;
top:0;
bottom: : 0;

可以做出滿版的效果，但我試著把height設定拿掉後，發現它變成沒有滿版了，滿版效果除了設定height之外還有其他方法可以做嗎？

  • 這裡原因是我 .container 沒有清除浮動，導致他高度是 0px，你也可以開啟 chrome 觀察看看，另外一種作法也可以設計如我寫的這個範例，vh 是依照瀏覽器高寬設計的單位，如果寫 100vh ，高度就會以類似 100 % 的單位來延伸，而寬度單位則是 vw 哩 :D

為什麼 .main 設定 width: 100%、.aside 設定 overflow: hidden?

  • main 設定100% 就是讓他變滿版而已，

    當我們點選展開左側選單，自然是要點選選單連結，所以 .main 會被向右推是預期效果，

    所以是不用再設定寬度的。

aside 下 overflow 只是老師個人習慣會不習慣內容超出去， 但他並不是主要動畫呈現的 CSS 語法哩！

你已經來過我們的線上問答會嗎？ 下禮拜三換我分享，也邀請你來哦，下禮拜一我們就會對外公告報名方式哩~

5-33 Animate.css - 載入第三方插件、增添網頁動畫豐富度

要怎麼讓按鈕可以重複點擊，能重複執行動畫效果

如何重複動畫效果

測驗四: 第四章測驗

Previous四、看看還有哪些動畫效果可以使用Next六、教你如何操控網頁元素

Last updated