【jQuery】點擊事件+動態效果

animate、delay、stop

 發表於 2024-01-22  |  1 分鐘  |  125 個字

【jQuery】點擊事件+動態效果

animate、delay、stop

 發表於 2024-01-22  |  1 分鐘  |  125 個字

animate用法介紹

  • $(selector).animate(properties, duration, easing, callback);
    • properties(必填): {css樣式組}
    • duration(可選): 持續時間
    • easing(可選): 動畫加速方式
    • callback(可選): function(){}

動態樣式支援類型

類型 css
支援的屬性 height、width、opacity、margin、padding、left、top、right、bottom、fontSize、borderWidth、scrollTop、scrollLeft
不支援的屬性 backgroundColor、color、borderColor、boxShadow、textShadow

原本background-color要改用駝峰式寫法backgroundColor

動態改變樣式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

//改變字體大小
$("button").click(function(){
  $("p").animate({fontSize:"3rem"},2000);
});

//推移距離與寬度
$("button").click(function(){
  $("p").animate({marginTop:"100px",width:"10px"},3000);
});

//接續其他動作用法
$("button").click(function(){
  $("p").animate({paddingLeft: "300px" }, 400, function() {
    console.log("動畫完成後執行此操作")
  });
});

動態改變樣式(進階用法)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

//一次執行多組動畫
$("button").click(function(){
  $("p").animate({fontSize:"3rem"},2000)
        .animate({paddingLeft: "50px" }, 600);
});

//一次執行多組動畫，中間延遲2秒
$("button").click(function(){
  $("p").animate({fontSize:"3rem"},2000)
        .delay(2000)
        .animate({paddingLeft: "50px" }, 600);
});

動態改變背景顏色

需要再額外引入jQuery.ui

1

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


1
2

<button type="button">按鈕</button>
<p>這段文字會隱藏</p>


1
2
3

$("button").click(function(){
  $("p").animate({backgroundColor:"red"},3000);
});

延遲效果

1
2
3

$(".box").delay(0).slideDown();
$(".box").delay(1000).slideDown();
$(".box").delay(2000).show(0);

show()若不給時間，會直接出現

停止動畫效果

  • $(selector).stop(stopAll,goToEnd)
    • stopAll(布林值)
      • true: 停止下一個動作
      • false: 接續下一個動作
    • goToEnd(布林值)
      • true: 停止在一開始
      • false: 停止在最後狀態

1

$(".box").stop(false,true);

jquery 

其他相關