# 五、教你如何搭配 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ayugioh2003.gitbook.io/jquery-learning/wu-3001-jiao-ni-ru-he-da-pei-css-jquery-ge-shi-ge-yang-de-dong-hua-xiao-guo.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.