如何用jQuery實(shí)現(xiàn)圖片劃過的動(dòng)畫

jQuery 動(dòng)畫 - animate() 方法

為青龍等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及青龍網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、青龍網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫。

語法：

$(selector).animate({params},speed,callback);

必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。

可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。

下面的例子演示 animate() 方法的簡(jiǎn)單應(yīng)用；它把 div 元素移動(dòng)到左邊，直到 left 屬性等于 250 像素為止：

實(shí)例

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

$("div").animate({left:'250px'});

});

提示：默認(rèn)地，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無法移動(dòng)。

如需對(duì)位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！

具體html代碼：

!DOCTYPE html

html

head

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"

/script

script

$(document).ready(function(){

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

$("div").animate({left:'250px'});

});

});

/script

/head

body

button開始動(dòng)畫/button

p默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動(dòng)。如需對(duì)位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。/p

div style="background:#98bf21;height:100px;width:100px;position:absolute;"

/div

/body

/html

jQuery animate() - 操作多個(gè)屬性

請(qǐng)注意，生成動(dòng)畫的過程中可同時(shí)使用多個(gè)屬性：

實(shí)例

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

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 Camel 標(biāo)記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時(shí)，色彩動(dòng)畫并不包含在核心 jQuery 庫中。

如果需要生成顏色動(dòng)畫，您需要從 jQuery.com 下載 Color Animations 插件。

具體html代碼：

!DOCTYPE html

html

head

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"

/script

script

$(document).ready(function(){

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

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

});

/script

/head

body

button開始動(dòng)畫/button

p默認(rèn)情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動(dòng)。如需對(duì)位置進(jìn)行操作，記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute。/p

div style="background:#98bf21;height:100px;width:100px;position:absolute;"

/div

/body

/html

如需其他更多了解，參考：

jquery圖片動(dòng)畫

css中的不是所有屬性都可以用jQuery動(dòng)畫（animate函數(shù)）來動(dòng)態(tài)改變，下面總結(jié)了JQ可以操作元素的一些屬性：

* backgroundPosition

* borderWidth

* borderBottomWidth

* borderLeftWidth

* borderRightWidth

* borderTopWidth

* borderSpacing

* margin

* marginBottom

* marginLeft

* marginRight

* marginTop

* outlineWidth

* padding

* paddingBottom

* paddingLeft

* paddingRight

* paddingTop

* height

* width

* maxHeight

* maxWidth

* minHeight

* maxWidth

* font

* fontSize（在animate函數(shù)的css參數(shù)指定并不同于標(biāo)準(zhǔn)css屬性，例如這個(gè)css標(biāo)準(zhǔn)是：font-size。同理上面很多也是這樣的情況）

* bottom

* left

* right

* top

* letterSpacing

* wordSpacing

* lineHeight

* textIndent

* opacity

jquery有哪些動(dòng)畫效果，如何自定義動(dòng)畫

一、動(dòng)畫 animate()

1、animate()方法的簡(jiǎn)單使用

有些復(fù)雜的動(dòng)畫通過之前學(xué)到的幾個(gè)動(dòng)畫函數(shù)是不能夠?qū)崿F(xiàn)，這時(shí)候就是強(qiáng)大的animate方法了。

操作一個(gè)元素執(zhí)行3秒的淡入動(dòng)畫，對(duì)比下一下2組動(dòng)畫設(shè)置的區(qū)別。

$(elem).fadeOut(3000)

$(elem).animate({

opacity:0

},3000)

顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執(zhí)行動(dòng)畫。

語法：

1?.animate(?properties?[,?duration?]?[,?easing?]?[,?complete?]?)

2?.animate(?properties,?options?)

.animate()方法允許在任意的數(shù)值的CSS屬性上創(chuàng)建動(dòng)畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對(duì)。這組屬性和用于設(shè)置.css()方法的屬性鍵值對(duì)類似，除了屬性范圍做了更多限制。第二個(gè)參數(shù)開始可以單獨(dú)傳遞多個(gè)實(shí)參也可以合并成一個(gè)對(duì)象傳遞了。

參數(shù)分解：

properties：一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫的屬性必須是數(shù)字的，除非另有說明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動(dòng)畫效果的。background-color很明顯不可以，因?yàn)閰?shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只能動(dòng)畫效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設(shè)置，而非 CSS 名稱（比如 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用

.animate({

left:?,

width:?'px'

opacity:?'show',

fontSize:?"em",

},?);

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫用來控制元素的顯示或隱藏

.animate({

width:?"toggle"

});

如果提供一個(gè)以+= 或 -=開始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來計(jì)算的

.animate({

left:?'+50px'

},?"slow");

duration：時(shí)間

動(dòng)畫執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。

easing動(dòng)畫運(yùn)動(dòng)的算法：

jQuery庫中是默認(rèn)的時(shí)調(diào)用 swing。在一個(gè)恒定的速度進(jìn)行動(dòng)畫，如果需要其他的動(dòng)畫算法，請(qǐng)查找相關(guān)的插件

complete回調(diào)

動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(fā)

2、animate() 方法來依次執(zhí)行多個(gè)動(dòng)畫

animate在執(zhí)行動(dòng)畫中，如果需要觀察動(dòng)畫的一些執(zhí)行情況，或者在動(dòng)畫進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過animate的提供第二種設(shè)置語法，傳遞一個(gè)對(duì)象參數(shù)，可以拿到動(dòng)畫執(zhí)行狀態(tài)一些通知。

.animate(?properties,?options?)

options參數(shù)

duration - 設(shè)置動(dòng)畫執(zhí)行的時(shí)間

easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動(dòng)函數(shù)

step：規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)

progress：每一次動(dòng)畫調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念

complete：動(dòng)畫完成回調(diào)

如果多個(gè)元素執(zhí)行動(dòng)畫，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫執(zhí)行一次

列出常用的方式

$('#elem').animate({

width:?'toggle',

height:?'toggle'

},?{

duration:?,

specialEasing:?{

width:?'linear',

height:?'easeOutBounce'

},

complete:?function()?{

$(this).after('divAnimation?complete./div');

}

});

調(diào)用animate()方法可以創(chuàng)建自定義動(dòng)畫效果，它的調(diào)用格式為：

$(selector).animate({params},speed,[callback])

其中，params參數(shù)為制作動(dòng)畫效果的CSS屬性名與值，speed參數(shù)為動(dòng)畫的效果的速度，單位為毫秒，可選項(xiàng)callback參數(shù)為動(dòng)畫完成時(shí)執(zhí)行的回調(diào)函數(shù)名。

例如，調(diào)用animate()方法以由小到大的動(dòng)畫效果顯示圖片，如下圖所示：

body

h制作簡(jiǎn)單的動(dòng)畫效果/h

img?src="images/.png"?alt=""/

div?id="tip"/div

script?type="text/javascript"

$(function()?{

$('img').animate({

width:?'px';

height:'px'

},?,?function()?{

$("#tip").html('執(zhí)行完成！');

});

})

/script

/body