preventDefault 取消默認行為

ex:

---HTML---
<a href="http://www.google.com.tw" class="close>按鈕</a>

---JavaScript---
$(document).ready(function(){
	$('.close').click(function(e){
		e.preventDefault();
	})
})

由以上的程式碼就可以將原本a連結的預設效果給取消。
所以，當我們按下這個a連結，就不會跳轉到http://www.google.com.tw 網址囉。

那為什麼要在a連結的js中，加上preventDefault呢，是因為今天該a連結
如果，只有要觸發某個事件，並沒有要讓頁面連到別的網頁的時候，
就需要用到preventDefault囉。

css() - 動態載入 CSS style 設定

語法
$('目標dom元素').css('屬性','屬性值')

由以上的範例可以看到，當我們點擊到.box後，可以透過css()來動態的修改它的css樣式。
那要特別注意，屬性跟屬性值外圍都要用單引號來把它們包起來喔。

設計下拉式收闔選單

本章節是用jQ來設計出下拉選單

注意若用flex來讓子元素靠攏，那下拉選單要用position

你可以看到上面的例子，是用flex來讓子元素向右靠攏，那這個時候你必須要為下拉選單使用position:absolute的屬性，
並調整它的top屬性來對齊觸發這個下拉選單的選項的高度，進而達成下拉選單的效果。
若你用flex來靠攏，但是沒有對下拉選單使用position:absolute的屬性的話，會導致下拉選單的高度也連父元素的高度都一起被
撐開囉。

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

它是一個可以讓dom元素的動畫產生依序產生的效果。

以上這個範例，就是裡用delay讓dom元素分別在0秒,1秒,2秒的時候，依序呈現它們的動畫效果。

jQ的show()方法要加參數

那這邊要特別注意，如果你用jQ的show的方法的時候，要記得裡面要給它時間的參數，像這邊給0，就是會立即出現。

fixed 固定網頁內容

這個小節是用position:fixed的方式將某個提示訊息定在網頁的特定位置中。
並設計在該提示訊息中，可以透過按下一個關閉鍵，來將這個提示訊息關掉。

使用 stop() 讓你的動畫效果更滑順

若你希望某個dom元素的動畫執行中，透過按下另一個鍵讓它在執行動畫的途中，
又回復到原本的狀態的話，你就可以用stop語法。

你可以看到，我們在按下按鈕後，它會執行slideToggle的動作，如果，我們希望中途回復到原本的樣子，那我們就再按下按鈕一次，就可以回復到原本的樣子囉。
注意，stop要寫在你的動畫語法前面喔，
即: $('.box').stop().slideToggle(3000);
如果，你寫在動畫效果後面的話，你的動畫會變得怪怪的優~~
即: $('.box').slideToggle(3000).stop(); // 不要寫在動畫後面

設定offcanvas左右選單切換

利用transform:translateX()的語法來做到開啟或關閉選單的效果

你可以看到再.menu有用position:absolute, top:0, bottom:0的CSS樣式，它不光是讓它填滿父元素的高度。
同時，也是不讓父元素的寬度連它.menu的寬度也被計算進去。
如果，你覺得奇怪，你可以試試看，不再.menu裡面加上position:absolute，
此時，父元素會連.menu的寬度都計算進去，會讓你的offcanvas的效果變得怪怪的。

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

利用載入Animate的CDN，並動態地為你的DOM元素增加Animate.css提供的className，
來為你的Dom元素添增Animate.css的效果

像以上的範例，就是透過動態的增加animate__animated animate__bounce 這個className來讓標題有彈跳的效果。

Landy Blog

jQuery課程筆記-CSS+jQuery各式各樣的動畫效果