教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

animate()方法創(chuàng)建自定義動畫

更新時間:2021年08月13日16時37分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓

為了滿足動畫實現(xiàn)的靈活性，解決單個方法實現(xiàn)動畫的單一性，jQvery中提供了animate() 方法讓用戶可以自定義動畫。語法如下所示。

$ (selector).animate (params[, speed][, easing][, fn])

上述語法中，params表示想要更改的樣式，以對象形式傳遞，樣式名可以不用帶引號，舊如果樣式名中有“-”( 如 border-left )，需要用駝峰命名法(如borderLeft)。其余參數(shù)的含義與前面講過的動畫方法相同，不再贅述。

下面我們通過代碼演示如何利用animate()方法創(chuàng)建自定義動畫。

<style>

div { width: 50px; height: 50px; background-color: P:pink;position:absolute; 
</style>

<button>動起來</button>

<div></div>

<script>

$ ("button") . click(function(){

$("div") .animate({ left: 500， top: 300, opacity: .4, width: 500 },500);

   };

 </script>

上述代碼中，第4行代碼定義按鈕。第5行代碼定義div元素。第7 ~ 9行代碼給頁面中的“動起來” 按鈕綁定單擊事件，當單擊鼠標時通過第8行代碼將div元素運動到距離人側(cè)50x、距離頂部30px的位置，透明度為0.4,寬度為500px。



猜你喜歡：

CSS動畫和JS動畫缺點和優(yōu)點分別是什么?

什么是動畫隊列？怎樣停止動畫隊列效果？

Javascript創(chuàng)建對象的方式有哪些？

傳智教育web前端開發(fā)培訓課程

0 分享到：
和我們在線交談！