JQuery 是一種簡潔的 JavaScript 庫,可以極大地簡化 JavaScript 編程。Animate 函數是 JQuery 中的一個動畫效果方法,可以用來實現網頁中的動畫效果。
使用 JQuery 的 animate 函數可以實現許多各種各樣的動畫效果,例如淡入淡出、上下滑動、左右滑動等等。
下面我們看一下 animate 函數的語法:
$(selector).animate({params},speed,callback);
其中參數說明:
- selector:必需,需要實現動畫效果的元素
- params:必需,可以是 CSS 樣式屬性、插件等參數
- speed:可選,動畫執行的速度??梢匀≈担?slow"、"fast"、或者毫秒數(例如:1000)
- callback:可選,動畫執行完畢后要執行的函數
例如,在一個 div 元素上實現一個移動的動畫效果:
<html> <head> <script src="jquery.js"></script> <style> div{background-color: red;width: 100px;height: 100px;position: absolute;} </style> </head> <body> <div id="myDiv"></div> <script> $(document).ready(function(){ $("#myDiv").animate({left:'500px'},5000); }); </script> </body> </html>
在上面的代碼中,我們將 div 的位置 從左邊移動到了右邊(水平移動),并且花費 5000 毫秒的時間執行動畫效果。