jQuery 效果 - 动画 animate() 方法
我們先看一個(gè)demo
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("div").animate({left:'250px'});}); }); </script> </head><body> <button>開(kāi)始動(dòng)畫(huà)</button> <p>默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無(wú)法移動(dòng)。如需對(duì)位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> </html>效果描述：它把 <div> 元素移動(dòng)到左邊，直到 left 屬性等于 250 像素為止。
?
jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫(huà)。
語(yǔ)法：
$(selector).animate({params},speed,callback);必需的 params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱。.
?
生成動(dòng)畫(huà)的過(guò)程中可同時(shí)使用多個(gè)屬性 ，比如：
$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'}); });提示：可以用 animate() 方法來(lái)操作所有 CSS 屬性嗎？
是的，幾乎可以！不過(guò)，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 Camel 標(biāo)記法書(shū)寫(xiě)所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時(shí)，色彩動(dòng)畫(huà)并不包含在核心 jQuery 庫(kù)中。
如果需要生成顏色動(dòng)畫(huà)，您需要從 jQuery.com 下載 Color Animations 插件。
?
?
Query animate() - 使用相對(duì)值
也可以定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'}); });
jQuery animate() - 使用預(yù)定義的值
您甚至可以把屬性的動(dòng)畫(huà)值設(shè)置為 "show"、"hide" 或 "toggle"：
$("button").click(function(){$("div").animate({height:'toggle'}); });
?
jQuery animate() - 使用隊(duì)列功能
默認(rèn)地，jQuery 提供針對(duì)動(dòng)畫(huà)的隊(duì)列功能。
這意味著如果您在彼此之后編寫(xiě)多個(gè) animate() 調(diào)用，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用。
$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow"); });
?
可以應(yīng)用動(dòng)畫(huà)的屬性：
backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent
?
轉(zhuǎn)載于:https://www.cnblogs.com/clear93/p/9242067.html
總結(jié)
以上是生活随笔為你收集整理的jQuery 效果 - 动画 animate() 方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 2.11.1.移植前的准备工作
- 下一篇： BufferedInputStream