如何用jQuery實現(xiàn)圖片劃過的動畫

jQuery 動畫 - animate() 方法

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

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

語法：

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

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

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

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

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

實例

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

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

});

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

如需對位置進行操作，要記得首先把元素的 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開始動畫/button

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

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

/div

/body

/html

jQuery animate() - 操作多個屬性

請注意，生成動畫的過程中可同時使用多個屬性：

實例

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

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

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

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

同時，色彩動畫并不包含在核心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 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開始動畫/button

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

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

/div

/body

/html

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

jquery圖片動畫

css中的不是所有屬性都可以用jQuery動畫（animate函數(shù)）來動態(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ù)指定并不同于標準css屬性，例如這個css標準是：font-size。同理上面很多也是這樣的情況）

* bottom

* left

* right

* top

* letterSpacing

* wordSpacing

* lineHeight

* textIndent

* opacity

jquery有哪些動畫效果，如何自定義動畫

一、動畫 animate()

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

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

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

$(elem).fadeOut(3000)

$(elem).animate({

opacity:0

},3000)

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

語法：

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

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

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

參數(shù)分解：

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

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

.animate({

left:?,

width:?'px'

opacity:?'show',

fontSize:?"em",

},?);

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

.animate({

width:?"toggle"

});

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

.animate({

left:?'+50px'

},?"slow");

duration：時間

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

easing動畫運動的算法：

jQuery庫中是默認的時調(diào)用 swing。在一個恒定的速度進行動畫，如果需要其他的動畫算法，請查找相關(guān)的插件

complete回調(diào)

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

2、animate() 方法來依次執(zhí)行多個動畫

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

.animate(?properties,?options?)

options參數(shù)

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

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

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

progress：每一次動畫調(diào)用的時候會執(zhí)行這個回調(diào)，就是一個進度的概念

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

如果多個元素執(zhí)行動畫，回調(diào)將在每個匹配的元素上執(zhí)行一次，不是作為整個動畫執(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)建自定義動畫效果，它的調(diào)用格式為：

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

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

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

body

h制作簡單的動畫效果/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

分享名稱：jquery圖片動畫,jq的動畫
瀏覽地址：http://chinadenli.net/article7/dsijsoj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、做網(wǎng)站、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)