【JS】jquery自訂動態效果

animate

 發表於 2024-01-12  |  1 分鐘  |  110 個字

【JS】jquery自訂動態效果

animate

 發表於 2024-01-12  |  1 分鐘  |  110 個字

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

動態改變樣式

 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()若不給時間，會直接出現

javaScript 

其他相關