# [jQuery] 動畫效果

###### tags: `jQuery`

功能庫：https://oscarotero.com/jquery/
六角影片：https://www.youtube.com/watch?v=GVWOIP-HX70
Animate網址：https://daneden.github.io/animate.css/

jQuery是個函數庫，較多的功能是在變更動畫效果，控制class屬性或id去更動Css(style)行為。函數庫裡功能除了單一個綁定屬性執行hide()外，其他有很多功能是需要放參數，像是秒數slideToggle（2000），又或者使需要{}進行更多動作，例如animate({scrollTop: 2000})

### 1. slide設計滑動效果

* slideUp : 關閉
* slideDown ：開啟
* slideToggle ：開關
* slideToggle（2000）:兩秒呈現


### 2. fade設計淡出效果

* fadeOut : 關閉
* fadeIn ：開啟
* fadeToggle ：開關

### 3. toggleClass搭配Css



如果要使用淡出效果，可在css裡設定opacity透明度，並使用transition設定淡出效果的秒數

> 定義透明效果的屬性是opacity，能夠設定的數值從 0.0 到 1.0。數值越小，透明度越高。
>

### 4. overflow用法

以box內大小為範圍，使用overflow:hidden會自動裁切掉多的部分，動畫設計上常使用此用法。


如果width有設定寬度，便會超出方格

### 5. 鏈式複合式動畫效果
* 連續動畫效果很容易，只需要在slideUp後再新增幾組效果slideDown及slideUp，便可呈現開啟關閉效果。


### 6. 延遲出現動畫效果

指定區塊後方新增.delay（毫秒）.fadeIn效果

### 7. css物理性隱藏視窗

將指定匡格先向左推270px使其消失畫面上，點擊後經由transform設定再向右回復原來匡格位置。

### 8. 實用資料庫：Animate.css 多動態效果

網址：https://daneden.github.io/animate.css/

點擊按鈕box會呈現晃動的效果

### 9. jQ操控網頁元素語法

#### this操控本身元素

點擊到特定位置後，會顯示反藍效果(效果會停留)

#### parent呼叫父階層元素

增加.parent可同時呼叫自己的父層(上一層級)