jQuery 效果 - 动画 animate() 方法
我們先看一個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>開始動畫</button> <p>默認情況下，所有 HTML 元素的位置都是靜態的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div></body> </html>效果描述：它把 <div> 元素移動到左邊，直到 left 屬性等于 250 像素為止。
?
jQuery animate() 方法用于創建自定義動畫。
語法：
$(selector).animate({params},speed,callback);必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成后所執行的函數名稱。.
?
生成動畫的過程中可同時使用多個屬性 ，比如：
$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'}); });提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫并不包含在核心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。
?
?
Query animate() - 使用相對值
也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'}); });
jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：
$("button").click(function(){$("div").animate({height:'toggle'}); });
?
jQuery animate() - 使用隊列功能
默認地，jQuery 提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。
$("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"); });
?
可以應用動畫的屬性：
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
?
轉載于:https://www.cnblogs.com/clear93/p/9242067.html
總結
以上是生活随笔為你收集整理的jQuery 效果 - 动画 animate() 方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2.11.1.移植前的准备工作
- 下一篇： BufferedInputStream