自定义动画——animate()
在JQuery中，通過(guò)使用animate()方法，可以允許用戶自定義動(dòng)畫，制作出效果更優(yōu)雅、動(dòng)作更復(fù)雜的頁(yè)面動(dòng)畫效果。
animate()方法給開(kāi)發(fā)者自定義各種復(fù)雜、高級(jí)的動(dòng)畫提供了極大的方便和空間，其調(diào)用語(yǔ)法為:
animate(params,[duration],[easing],[callback])
參數(shù)params表示用于制作動(dòng)畫效果的屬性樣式和值的集合。
可選項(xiàng)[duration]表示三種默認(rèn)的速度字符“slow”、“normal”、“fast”或自定的數(shù)字。
可選參數(shù)[easing]為動(dòng)畫插件使用，用于控制動(dòng)畫的表現(xiàn)效果，通常有“l(fā)inear”和“swing”字符值。
可選參數(shù)[callback]為動(dòng)畫完成后，執(zhí)行的回調(diào)函數(shù)。
PS：在動(dòng)畫方法animate()中，第一個(gè)參數(shù)params在表示動(dòng)畫屬性時(shí)，需要采用“駱駝”寫法，即如果是“font-size”，必須寫成“fontSize”才有效，否則報(bào)錯(cuò)。
（1）功能描述
在頁(yè)面中，單機(jī)某塊<div>元素，其自身的高度和寬度以動(dòng)畫的效果增大。動(dòng)畫完成后，元素的邊框加粗，并且邊框顏色及<div>元素內(nèi)容發(fā)生變化。
（2）實(shí)現(xiàn)代碼
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style>.box{border: solid 1px #ccc;background-color: #eee;width: 100px;height: 100px;font-size: 13px;padding: 5px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script>$(function(){$(".box").click(function(){$(this).animate({ //寬與高變化的動(dòng)畫效果 width:"20%",height:"200px"},3000,function(){$(this).css({"border":"solid 4px orange"}).html("變大了！");});});}) </script> </head> <body><div class="box">點(diǎn)擊變大</div> </body> </html>結(jié)果如下圖所示：
?
通過(guò)animate()方法，不僅可以用運(yùn)動(dòng)效果增加元素的長(zhǎng)和寬，還能以動(dòng)畫效果移動(dòng)頁(yè)面種的元素，即改變其相對(duì)位置。
?例如：
$("div").animate({left:"20px",top:"60px" },3000)?轉(zhuǎn)載于:https://www.cnblogs.com/baixc/p/3405706.html
總結(jié)
以上是生活随笔為你收集整理的自定义动画——animate()的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 生活的态度
- 下一篇： c# WinForm开发 DataGri