jquery中animate的使用

2022-09-03 22:54:29 字數 3031 閱讀 7718

一、使用方法

1、$("div").animate( );

$("div").animate( );

$("div").animate( );

$("div").animate( );

$("div").animate( );

以上五種方法效果相同

注:(1)屬性值需要被引號包裹起來,如前三種方法中都包含了字串'px'則需要用引號。

但是數值不需要,如第四五種方法中的300不需要引號,其中不區分單雙引號

(2)屬性名可以不被引號包裹,其中不區分單雙引號。

(3)當數值型的屬性值不加單位時,預設為'px'。

2、$("div").animate( );

(1)font-size這種中間帶有橫線的屬性需要去除橫線,但是需要將第二個單詞首字母大寫。

(2)當{}裡面放多個屬性時需要用逗號隔開。

3、$("div").animate(,500);

(1)上述2中提到中間帶有橫線的屬性需去除橫線等,本例中backgroundcolor同理,但是animate本身不可以設定顏色等屬性,則需要引入如下js方可使用:

(2)animate({},500) 表示執行該動畫的時間為5秒。

(3)例子:

demo

4、$("div").animate( ,5000,function());

該例子指當5秒執行動畫之後,呼叫函式function()。

二、css中的不是所有屬性都可以用animate來動態改變,下面總結了可以操作元素的一些屬性:

* backgroundposition

* borderwidth

* borderbottomwidth

* borderleftwidth

* borderrightwidth

* bordertopwidth

* borderspacing

* margin

* marginbootom

* marginleft

* marginright

* margintop

* outlinewidth

* padding

* paddingbottom

* paddingleft

* paddingright

* paddingtop

* height

* width

* maxheight

* maxwidth

* minheight

* minwidth

* font

* fontsize

* bottom

* left

* right

* top

* letterspacing

* wordspacing

* lineheight

* textindent

* opacity

三、相關**

解決jquery中animate動畫積累

無縫式焦點圖 var left 770 var left left 770 function slideimg slidepics animate 1000 left left left tim settimeout slideimg,5000 slideimg 由於以前也沒遇到過此問題,我也是想了...

jQuery 效果 animate 方法

jquery 效果參考手冊 改變 div 元素的高度 btn1 click function 親自試一試 animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 marg...

jQuery 效果 animate 方法

animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 margin 30px 字串值無法建立動畫 比如 background color red 注釋 使用 或 來建立...