定義和用法
animate() 方法執行 CSS 屬性集的自定義影片，該方法通過 CSS 樣式將元素從一個狀態改變為另一個狀態，CSS屬性值是逐漸改變的，這樣就可以創建影片效果，只有數字值可創建影片（比如 "margin:30px"），字串值無法創建影片（比如 "background-color:red"），提示：請使用 "+=" 或 "-=" 來創建相對影片，語法
$(selector).animate({styles},speed,easing,callback)引數
| 引數 | 必需的 | 描述 |
|---|---|---|
| styles | 是 | 規定產生影片效果的一個或多個 CSS 屬性/值，注意：當與 animate() 方法一起使用時，該屬性名稱必須是駝峰寫法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推，可以應用影片的屬性：
|
| speed | 否 | 規定影片的速度，可能的值：
|
| easing | 否 | 規定在影片的不同點中元素的速度，默認值是 "swing"，可能的值：
|
| callback | 否 | animate 函式執行完之后，要執行的函式，如需學習更多有關 callback 的內容，請訪問 jQuery Callback ， |
實體
下例演示了animate()方法的簡單用法; 它將<div>元素向右移動，直到它達到250px的left屬性：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>歡迎來到蝴蝶教程</title>//此版本是百度cdn 1.11.1，當然你可以使用更高的版本，從2.0版本以上的是不支持ie6-8的<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script> $(document).ready(function () { $("button").click(function(){ $("div").animate({left: '250px'}); }); });</script></head><body> <button>開始影片</button> <p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的， 如果需要改變為，我們需要將元素的 position 屬性設定為 relative, fixed, 或 absolute!</p> <div style="background:#009688;height:100px;width:100px;position:absolute;"></div> </body></html>
相關知識
jQuery 影片 >>>>>>>>>jQuery 實體 >>>>>>>>>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34140.html
標籤：jQuery