jquery animate 動畫效果使用解析

阿新 • • 發佈：2019-01-18

animate的意思是：使有生氣；驅動；使栩栩如生地動作；賦予…以生命
作為形容詞：有生命的；活的；有生氣的；生氣勃勃的

先看動畫效果：
http://keleyi.com/keleyi/phtml/jquery/index.htm

animate()在jquery中作為一個方法，可用於建立動畫效果

以下是例項程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
>
<head>
<title>jquery animate動畫--柯樂義</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button#bGo_kel"+"eyi_com 
").click(function () {
$("div#divAnimate_keleyi_com").animate({ top: "-280px", opacity: "0.5" }, "slow");
$("div#divAnimate_keleyi_com").animate({ fontSize: "5em" }, "slow");
});
$("button#bBack_keleyi_com").click(function () {
$("div#divAnimate_ke"+"leyi_com").animate({ top: "0px", opacity: "1" },  
"slow");
$("div#divAnimate_keleyi_com").animate({ fontSize: "1em" }, "slow");
});
});
</script>
</head>
<body>
<div style="width:400px;margin:10px auto;border:1px solid green">
<h2>animate動畫效果演示</h2>
<button id="bGo_keleyi_com">開始動畫</button> <button id="bBack_keleyi_com">回滾動畫</button> <a href="http://keleyi.com/a/bjac/5b62295315de9ace.htm" target="_blank">原文</a><br /><br />
<div id="divAnimate_keleyi_com" style="background:green;height:110px;width:400px;position:relative;color:White">keleyi.com</div>
</div>
<div><a href="http://keleyi.com/keleyi/phtml/jquery/1.htm">jquery修改連結</a> <a href="http://keleyi.com/keleyi/phtml/jquery/2.htm">jquery彈出窗體</a></div>
</body>
</html>

部落格園計劃

定義和用法
animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。
只有數字值可建立動畫（比如 "margin:30px"）。字串值無法建立動畫（比如 "background-color:red"）。
註釋：使用 "+=" 或 "-=" 來建立相對動畫（relative animations）。

語法 1
$(selector).animate(styles,speed,easing,callback)

引數

styles
必需。規定產生動畫效果的 CSS 樣式和值。
可能的 CSS 樣式值（提供例項）：
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
註釋：CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設定，而非 CSS 名稱（比如 "font-size"）。

speed
可選。規定動畫的速度。預設是 "normal"。
可能的值：
毫秒（比如 1500）
"slow"
"normal"
"fast"

easing
可選。規定在不同的動畫點中設定動畫速度的 easing 函式。
內建的 easing 函式：
swing
linear
擴充套件外掛中提供更多 easing 函式。

allback
可選。animate 函式執行完之後，要執行的函式。

語法 2
$(selector).animate(styles,options)

styles 必需。規定產生動畫效果的 CSS 樣式和值（同上）。

options
可選。規定動畫的額外選項。
可能的值：
speed - 設定動畫的速度
easing - 規定要使用的 easing 函式
callback - 規定動畫完成之後要執行的函式
step - 規定動畫的每一步完成之後要執行的函式
queue - 布林值。指示是否在效果佇列中放置動畫。如果為 false，則動畫將立即開始
specialEasing - 來自 styles 引數的一個或多個 CSS 屬性的對映，以及它們的對應 easing 函式

jquery animate 動畫效果使用解析

jquery animate 動畫效果使用解析

jQuery 的動畫效果圖片----隱藏打開方法

前端 ----jQuery的動畫效果

JQuery簡單動畫效果演示

jquery 實現動畫效果（各種方法）

jQuery animate動畫

jQuery的動畫效果以及圖片切換例項

jQuery動畫效果animate和scrollTop結合使用實例

一、jQuery小程式之jQuery效果顯示和隱藏 fading方法滑動方法 animate()動畫方法 chaining

jQuery中animate（）動畫效果的實現

動畫效果詳情請看 jQuery api 動畫收放 slideUp slideDown 通過id class 來設置 jQuery實現效果

jQuery-4.動畫篇---淡入淡出效果

jQuery——動畫效果

angular2 如何使用animate實現動畫效果

python全棧學習--Day53(jQuery的介紹,jQuery的選擇器,jQuery動畫效果)

jQuery事件機制，動畫效果，工具和其他操作（三）

03-jQuery動畫效果

web開發中常用的jquery動畫效果

jQuery實現加入購物車飛入動畫效果之開發不停，填坑不止（起點位置在Y軸方向位置偏移）

jQuery —— 動畫效果

jquery animate 動畫效果使用解析

相關推薦