preventDefault()、jQuery動態載入css style設定、下拉式收闔選單、延遲動畫效果delay()、字型即時放大縮小
取消預設會產生的事情
preventDefault()則點了連結會沒有反應產生，不會跳到設定的網頁去<body>
<a class="close" href="https://google.com">哈囉我是連結</a>
</body>
$(document).ready(function() {
$('.close').click(function(event) {
event.preventDefault();
});
});
$('選擇器').css('變數','變數');
$('.box').css('變數','變數');
<body>
<div class="box"></div>
</body>
.box{
width: 300px;
height: 300px;
background: #000;
}
$(document).ready(function () {
$('.box').css('width','500');
});
點擊訂單查詢顯示下方選單列，再次點擊訂單查詢下方選單列合起 & 訂單查詢按鈕運作時顯示css設定的動作(白字黑底)
$(document).ready(function () {
$('.dropdown').click(function (e) {
//取消a連結默認的動作
e.preventDefault();
// 按下訂單查詢(.dropdown)，選單做展開與收闔的動作
$('.dropdown-open').slideToggle();
//按下訂單查詢(.dropdown)，背景然執行css設定的動作
$('.dropdown').toggleClass('active');
});
});
delay(時間,毫秒為單位)
delay()可接fadeIn、slideDown 等，但寫delay+show時需寫數值因為show預設是立即出現，沒加數值則會按下按鈕就出現
delay() 中間括號內的時間為延遲多久再跑下一個動畫效果$('選擇器').delay(時間以毫秒為單位).slideToggy();
preventDefault() 取消默認的動作
iThome鐵人賽
看影片追技術