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

全國(guó)咨詢/投訴熱線:400-618-4000

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

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

好口碑IT培訓(xùn)

為了滿足動(dòng)畫(huà)實(shí)現(xiàn)的靈活性,解決單個(gè)方法實(shí)現(xiàn)動(dòng)畫(huà)的單一性,jQvery中提供了animate() 方法讓用戶可以自定義動(dòng)畫(huà)。語(yǔ)法如下所示。

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

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

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

<style>

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

<button>動(dòng)起來(lái)</button>

<div></div>

<script>

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

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

   };

 </script>

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



猜你喜歡:

CSS動(dòng)畫(huà)和JS動(dòng)畫(huà)缺點(diǎn)和優(yōu)點(diǎn)分別是什么?

什么是動(dòng)畫(huà)隊(duì)列?怎樣停止動(dòng)畫(huà)隊(duì)列效果?

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

傳智教育web前端開(kāi)發(fā)培訓(xùn)課程

0 分享到:
和我們?cè)诰€交談!