jqurey中的animate方法

2021-10-06 10:49:05 字數 2273 閱讀 3117

在原生js裡面並沒有提供動畫方法,如果要實現,必須結合定時器來實現一些動畫,但是jquery就給我們提供了一些實現動畫的方法。列如:animate方法。

下面我來對這個方法談一下自己的一些理解。

animate方法,用於建立自定義動畫的函式。

語法:animate(,speed,callback);

必需的 params 引數定義形成動畫的 css 屬性。

可選的 speed 引數規定效果的時長。它可以取以下值:「slow」、「fast」 或毫秒。

可選的 callback 引數是動畫完成後所執行的函式名稱。

列子:通過animate改變盒子的高度:

<

!doctype html>

"en"

>

"utf-8"

/>

"viewport" content=

"width=device-width, initial-scale=1.0"

/>

document<

/title>

.list

<

/style>

<

/head>

="list"

>

<

/div>

改變前<

/button>

"js/jquery-1.8.3.min.js"

>

<

/script>

$("button").

click

(function()

,3000

,function()

);})

;<

/script>

<

/body>

<

/html>

改變之前

改變之後

也可以同時改變他的多個樣式

$(

"button").

click

(function()

,3000

,function()

);})

;<

/script>

改變之前:

改變之後:

也可以實現一些值的累加

$(

"button").

click

(function()

,3000

,function()

);})

;<

/script>

執行之前:

單擊一次之後:

單擊2次之後:

以此類推。。。

注意在animate能改變的只有以下屬性:

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

topletterspacing

wordspacing

lineheight

textindent

jquery中animate的使用

一 使用方法 1 div animate div animate div animate div animate div animate 以上五種方法效果相同 注 1 屬性值需要被引號包裹起來,如前三種方法中都包含了字串 px 則需要用引號。但是數值不需要,如第四五種方法中的300不需要引號,其中不...

JQurey的基本使用

使用jquery,必須先引入jq庫 jquery 3.4.1.min.js script js的變數 var a 10 jq的變數 var a 10 宣告該變數是jq變數 同時 也是jquery的簡寫dom的變數 和 jq的變數之間 轉換 轉換為jq變數 var odiv document.gete...

jqurey的動畫效果

目標.hide 讓目標隱藏 修改的display屬性 小括號中,可是設定動畫執行的時間 目標.show 讓目標顯示 小括號中,可以設定動畫執行的時間 var flag 1 btn first click function else 目標.toggle 會先進行目標的屬性,如果是顯示,就設定為隱藏 如...