animate

英[??n?me?t]? ?美[??n??met]??

vt.使有生氣;驅(qū)動(dòng);使栩栩如生地動(dòng)作;給予…以生命

#vt.使有生氣;驅(qū)動(dòng);使栩栩如生地動(dòng)作;賦予…以生命

###adj.有生命的;活的;有生氣的;生氣勃勃的###

jquery animate() 方法 語(yǔ)法

作用:animate() 方法執(zhí)行 CSS 屬性集的自訂動(dòng)畫。此方法透過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。 CSS屬性值是逐漸改變的,這樣就可以創(chuàng)造出動(dòng)畫效果。只有數(shù)字值可建立動(dòng)畫(例如 "margin:30px")。字串值無(wú)法建立動(dòng)畫(例如 "background-color:red")。使用 " =" 或 "-=" 來(lái)建立相對(duì)動(dòng)畫(relative animations)。

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

參數(shù):

#參數(shù)描述
styles? ??必要。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值。
speed? ??可選。規(guī)定動(dòng)畫的速度。預(yù)設(shè)是 "normal"??赡艿闹担汉撩?(例如 1500) "slow"? "normal"? "fast"?
easing? ??#可選。規(guī)定在不同的動(dòng)畫點(diǎn)中設(shè)定動(dòng)畫速度的 easing 函數(shù)。內(nèi)建的 easing 函數(shù):swing? ?linear擴(kuò)充插件中提供更多 easing 函數(shù)。
callback? ??可選。 animate 函數(shù)執(zhí)行完之後,要執(zhí)行的函數(shù)。


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

參數(shù):

參數(shù)說明
styles? ??#必要。規(guī)定產(chǎn)生動(dòng)畫效果的 CSS 樣式和值(同上)。
options可選。規(guī)定動(dòng)畫的額外選項(xiàng)??赡艿闹担簊peed - 設(shè)定動(dòng)畫的速度? easing - 規(guī)定要使用的 easing 函數(shù)? callback - 規(guī)定動(dòng)畫完成後要執(zhí)行的函數(shù)? ? step - 規(guī)定動(dòng)畫的每一步完成之後要執(zhí)行的函數(shù)? ?queue - 布林值。指示是否在效果佇列中放置動(dòng)畫。如果為 false,則動(dòng)畫將立即開始? ?specialEasing - 來(lái)自?styles?參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射,以及它們的對(duì)應(yīng) easing 函數(shù)
#

jquery animate() 方法 範(fàn)例

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
執(zhí)行實(shí)例 ?

#點(diǎn)擊 "執(zhí)行實(shí)例" 按鈕查看線上實(shí)例

#