# 五、教你如何搭配 CSS、jQuery 各式各樣的動畫效果 ## 5-24 使用 preventDefault() 取消默認行為有時想呈現動畫效果，不會用按鈕，會用連結但連結的預設效果是，會傳送網址如果不想讓 a 有傳送網址的行為的話這時就可以用 `preventDafult()` 來取消預設行為 ```markup

連結

``` ## 5-25 preventDefault 程式碼範例 ```javascript $(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 但有些情況可能需要動態的知道瀏覽器寬度多少 ```javascript $('.box').css('width', '20px'); ``` jQuery 不同版本 api 有差異 * 早期版本可用 toggle 切換 * [W3School 在線測試工具 V2](http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_toggle_function) * 在目前 jQuery 3.0 已經沒有惹 * [.toggle() | jQuery API Documentation](http://api.jquery.com/toggle/) jQuery 的鏈式 * 動畫呈現容易與其他功能衝突 * [jquery 鍊式寫法](https://codepen.io/erickkkkk/pen/RJajyP) * 改用 callback 寫法，等前面執行完才執行 callback，這樣就不會有事情惹 * [jquery 鍊式寫法](https://codepen.io/anon/pen/PaNeWK) ## 5-27 設計下拉式收關選單滑鼠移動到連結時，會展開往下的選單第一步驟，先完成滑鼠 hover 後會自動展開 * [HW 5-27 設計下拉式收關選單 css | jQuery](https://codepen.io/ayugioh2003/pen/ERNOyN) 第二步驟，用 js 控制 * 先在訂單查詢 div 加上 .dropdown * 訂單查詢下層的 ul 加上 .dropdown-open 展開訂單查詢的子選單後，想讓訂單查詢按鈕保持藍底的樣式 * 在 css 控制 `.menu a.active` 也有背景色 * 用 jQuery 切換 .active * [HW 5-27 設計下拉式收關選單 jq | jQuery](https://codepen.io/ayugioh2003/pen/ERNOpv) 同學提問滿版設計 * 原先 * [JS Bin - Collaborative JavaScript Debugging](https://jsbin.com/sugumaleka/1/edit?html,css,output) * 要使用絕對定位 * [JS Bin - Collaborative JavaScript Debugging](https://jsbin.com/dolovib/edit?html,css,output) 如何按其他 menu 時，之前的會收起來 * [An Anonymous Pen on CodePen](https://codepen.io/anon/pen/qXgjXz?editors=1010) * 範例 `$(this).parent('li').siblings().find('a').siblings('.dropdown-open').slideUp()` * [jQuery 遍历 - siblings() 方法](http://www.w3school.com.cn/jquery/traversing_siblings.asp) * 滑入滑出效果，可用 mouseenter, mouseleave * [jQuery 事件 - mouseenter() 方法](http://www.w3school.com.cn/jquery/event_mouseenter.asp) 如何讓出現的子選單覆蓋在下面的 banner 圖片上 * 第二層 li 請用相對定位、絕對定位來設計 * [下拉選單無法覆蓋在 banner 圖片上面](https://codepen.io/liao/pen/WEoONR) 若有兩層的多個子選單如何讓 `$('.dripdown-open').slideToggole` 一次只開出被點選的 .dropdown，而不是全都出來用 `$('this').toggleClass('active')` 似乎有用 * 可以用 next 選擇器 * `$(this).next('.dropdown-open').slideToggle();` * [jQuery 遍历 - next() 方法](http://www.w3school.com.cn/jquery/traversing_next.asp) * [.next() | jQuery API Documentation](https://api.jquery.com/next/#next-selector) * 同學使用 mouse 在點擊選單後，如何點擊其他地方達成收起效果 * 原本 [A Pen by Meng](https://codepen.io/SmallFly/pen/rmvaNB) * 老師說可用 mouseleave (bad) * [A Pen by gonsakon](https://codepen.io/liao/pen/gWzwzj) * 同學使用 mouseup，可參考 * [A Pen by Meng](https://codepen.io/SmallFly/pen/oWdqev) * find() 和 children() 有何不同 * .find() 是指在這個範圍內都可進行搜尋，不看階層性。而 children 則是只會選取到當下的「子階層」而已，所以就應時機來使用哩 :D * [jQuery find() 方法 | 菜鳥教程](http://www.runoob.com/jquery/traversing-find.html) hover 效果自動關閉選單 * Hello shin，我這裡寫了個純 CSS 範例給你參考，因為通常來說比較少會做click事件，移出hover就自動關閉，這點比較傾向用純css直接做hover效果比較單純，如果硬要做就可以，你可以看這裡的 events 區塊，裡面的 mouseout就可以做滑鼠移出的事情哩，但以下拉式選單的案例來說比較麻煩，因為他是li裡面的a連結外又包了 ul，所以以這case來講實作上可能要思考一下，也提供給你參考哩 :D * [A Pen by gonsakon](https://codepen.io/liao/pen/wWdOqd) * [jQuery Cheat Sheet](https://oscarotero.com/jquery/) 我的問題 * 沒有加 clearfix，是因為讓子選單刻意破版嗎 ## 5-28 delay()-延遲動畫效果的好用語法讓動畫先後呈現 emmet 用 $ 字號可以自動產生流水號 show() 沒有寫內容的話，會直接出現，不理會 delay * [HW 5-28 delay()- 延遲動畫效果的好用語法 | jQuery](https://codepen.io/ayugioh2003/pen/VdmRdd) 為什麼按鈕絕對定位 left:50 了卻沒置中效果 * 原始 [A Pen by JerryYen](https://codepen.io/JerryYen/pen/JvgeNM) * 可以先 left:50，給按鈕 width: 100px，再 margin-left: -50px，達到置中效果 * [An Anonymous Pen on CodePen](https://codepen.io/anon/pen/ZogmVJ) CSS 的 transition duration 和 delay 效果 * duration 是動畫持續效果，delay 是動畫延遲效果。 * [Tryit Editor v3.5](https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-delay) * delay() 用在 jQuery，剛剛的都是用在 CSS ## 5-29 即時縮放縮小字型好簡單點大中小，能即時縮放字型 * [HW5-29 即時縮放縮小字型好簡單 | jQuery](https://codepen.io/ayugioh2003/pen/QxdZLM) ## 5-30 fixed 固定網頁內容彈出視窗、廣告怎麼做可能固定在左下角 abosolute 在動畫效果常見，可定位在父元素的特定位置 * [HW5-30 fixed 固定網頁內容 | jQuery](https://codepen.io/ayugioh2003/pen/eKgQQz) abosolute 和 fixed 的差異 * [JS Bin - Collaborative JavaScript Debugging](http://jsbin.com/zijegetaje/1/edit?html,css,output) * absolute：只會依照父元素進行定位 * fixed：不管在任何位置，永遠訂在網頁上 fixed 也能做固定於右下方，點擊後能回上方的效果? * [jQuery Scroll Top](https://codepen.io/karencho/pen/KIgur) * 還有滾動後才出現元件的寫法 ```javascript $('.scrollTop').click(function() { $('html, body').animate({ scrollTop: 0 }, 800); }); ``` ## 5-31 使用 stop() 讓你的動畫效果更華順希望動畫執行中，能強制開始下一個動畫 * [HW5-31 使用 stop() 讓你的動畫效果更華順 | jQuery](https://codepen.io/ayugioh2003/pen/gKgZay) 是否有能中斷就停在那邊，按鈕後從原本地方再繼續動作 * [jQuery stop and animate](https://codepen.io/Wcc723/pen/oBRXQv?editors=1010) * 程式碼是什麼意思 \`\`\`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 - 載入第三方插件、增添網頁動畫豐富度 * [Animate.css](https://daneden.github.io/animate.css/) * 下載、對想要有動畫的元件加入 class * 可用 js 導入 * [daneden/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.](https://github.com/daneden/animate.css) * [Using Animate.css and jQuery for easy Web Animation - YouTube](https://www.youtube.com/watch?v=CBQGl6zokMs) 要怎麼讓按鈕可以重複點擊，能重複執行動畫效果 * 先 removeClass 再 addClass 會有 bug * [animate\_test](https://codepen.io/Edann/pen/zENyqK?editors=1010) * stack overflow 有解法 * [javascript - jQuery CSS animations with addClass and removeClass - Stack Overflow](https://stackoverflow.com/questions/23449068/jquery-css-animations-with-addclass-and-removeclass) * 老師提供範例 [animate\_test](https://codepen.io/liao/pen/aLJbVb?editors=1010) * `.one` 是什麼 * `one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){})` * 這句語法白話文的意思是「當動畫結束後去執行第二個參數function的內容，且只執行一次」。至於為什麼會有四個，則是依照瀏覽器不同而各別設定，ms 是 ie、o 應該是 opera、webkit 是chrome、safari。.one 則是指執行一次的意思，不會永久綁定，可以再看他的文件補充觀念哦 * [.one() | jQuery API Documentation](http://api.jquery.com/one/) 如何重複動畫效果 * [daneden/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.](https://github.com/daneden/animate.css) * [六角學院 - 讓網頁動起來: animate.css - YouTube](https://www.youtube.com/watch?v=jUFM_noM4IE) ## 測驗四: 第四章測驗 ![第四章測驗](https://i.imgur.com/9piBzV0.png)