聊聊使用jQuery如何實(shí)現(xiàn)動(dòng)畫（代碼詳解）

使用jQuery如何實(shí)現(xiàn)動(dòng)畫？下面本篇文章給大家介紹一些jQuery實(shí)現(xiàn)預(yù)定義動(dòng)畫或自定義動(dòng)畫的方法，希望對(duì)大家有所幫助！

預(yù)定義動(dòng)畫

顯示與隱藏

show() 方法和 hide() 方法是 jQuery 中最基本的動(dòng)畫方法。具體語(yǔ)法如下:

$element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]);

• speed : 三種預(yù)定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值。
• easing : 用來(lái)指定切換效果，默認(rèn)是 “swing”，可用參數(shù) “l(fā)inear ”。
• fn : 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

/*  顯示與隱藏 1.無(wú)動(dòng)畫版本   * show()- 顯示   * hide() - 隱藏 2.有動(dòng)畫版本 - 同時(shí)改變寬度和高度  * show (speed,callback)   * speed - 動(dòng)畫執(zhí)行的時(shí)長(zhǎng),單位為毫秒   * callback - 動(dòng)畫執(zhí)行完畢后的回調(diào)函數(shù)  * hide (speed, callback)   * speed - 動(dòng)畫執(zhí)行的時(shí)長(zhǎng),單位為毫秒   * callback - 動(dòng)畫執(zhí)行完畢后的回調(diào)函數(shù) */  $('#box').hide(2000,function(){ $('#box').show(2000);           });

滑動(dòng)式動(dòng)畫

slidelUp() 方法和 slideDown() 方法通過(guò)改變高度值實(shí)現(xiàn)動(dòng)畫效果。具體語(yǔ)法如下:

$element.slideUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]);

• speed : 三種預(yù)定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值。
• easing : 用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear ”。
• fn : 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

/*  滑動(dòng)式動(dòng)畫 - slideup()和slideDown() * 注意 - 沒(méi)有無(wú)動(dòng)畫版本(底層代碼預(yù)定義動(dòng)畫執(zhí)行的時(shí)長(zhǎng)) * 效果 - 改變指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);

淡入淡出效果

fadeln() 方法和 fadeOut() 方法通過(guò)改變透明度實(shí)現(xiàn)動(dòng)畫效果。具體語(yǔ)法如下:

$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);

• speed : 三種預(yù)定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值。
• easing : 用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear ”。
• fn : 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

// 改變?cè)氐耐该鞫?$('#box').fadeOut(3000); $('#box').fadeIn(3000);

動(dòng)畫切換效果

jQuery 除了提供了三種預(yù)定義動(dòng)畫效果之外，還提供三組動(dòng)畫切換效果:

• toggle ([speed], [easing] [, fn] )方法 : 如果元素是可見的，切換為隱藏的;如果元素是隱藏的，切換為可見的。
• slideToggle([speed], [easing] [, fn]) 方法 : 通過(guò)高度變化來(lái)切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
• fadeToggle([speed], [easing] [, fn]) 方法 : 通過(guò)不透明度的變化來(lái)開關(guān)所有匹配元素的淡入和淡出效果，并在動(dòng)畫完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

$('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })

具有局限性

自定義動(dòng)畫

animate()方法

jQuery 提供了 anirmate() 方法完成自定義動(dòng)畫效果，該方法具有兩種用法:

$element.animate(properties,duration,easing,complete)

• properties : 一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。
• duration : 一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久。
• easing : 一個(gè)字符串，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。
• cormplete : 在動(dòng)畫完成時(shí)執(zhí)行的回調(diào)函數(shù)。

/*  animate()方法–自定義動(dòng)畫方法 1.animate(properties,duration，callback)  * properties - 表示cSS的樣式屬性   * 設(shè)置動(dòng)畫執(zhí)行結(jié)束的樣式屬性值  * duration - 表示動(dòng)畫執(zhí)行的時(shí)長(zhǎng)，單位為亳秒  * callback - 表示動(dòng)畫執(zhí)行完畢后的回調(diào)函數(shù) 2.animate(properties,options)  * properties - 表示cSS的樣式屬性   * 設(shè)置動(dòng)畫執(zhí)行結(jié)束的樣式屬性值  * options - 表示設(shè)置動(dòng)畫的相關(guān)參數(shù)   * speed - 表示動(dòng)畫執(zhí)行的時(shí)長(zhǎng),單位為毫秒   * comalete - 表示動(dòng)畫執(zhí)行完畢后的回調(diào)函數(shù)   * queue - 布爾值,設(shè)置是否添加到動(dòng)畫隊(duì)列中 */ /* $('#box').animate({  width : 100,  height : 100 },3000); */ $('#box').animate({  width : 100,  height : 100,  left : 100 },{  speed : 3000 });

通過(guò) animate() 方法實(shí)現(xiàn)動(dòng)畫效果，但不支持以下 CSS 樣式屬性:

• backgroundColor
• borderBottonColor.
• borderLeftColor
• borderRightColor
• borderTopColor
• Color
• outlineColor

并發(fā)與排隊(duì)效果

并發(fā)效果 : 指的就是多個(gè)動(dòng)畫效果同時(shí)執(zhí)行。

$("#panel").click(function(){  $(this).animate({    left: "500px",    height:"200px"  }, 3000); };

排隊(duì)效果 : 指的就是多個(gè)動(dòng)畫按照先后順序執(zhí)行。

$("#panel").click(function(){  $(this).animate({ left: "500px"},3000)   .animate({ height: "200px" }, 3000); });

queue : 用于控制當(dāng)前的動(dòng)畫效果是并發(fā)還是排隊(duì)效果:

/*  queue - 用于控制當(dāng)前的動(dòng)畫效果是并發(fā)還是排隊(duì)效果 * 參數(shù)  * false - 并發(fā)  * true - 排隊(duì) */ $('#box').animate({  left : 300 },{  duration : 3000 }).animate({  top : 300 },{  duration : 3000,  queue : true });

停止動(dòng)畫效果

jQuery 提供了 stop() 方法用于停止所有在指定元素上正在運(yùn)行的動(dòng)畫，具體語(yǔ)法如下:

$element.animate([clearQueue][, gotoEnd]);

clearQueue : 如果設(shè)置成 true，則清空隊(duì)列?？梢粤⒓唇Y(jié)束動(dòng)畫。

gotoEnd : 讓當(dāng)前正在執(zhí)行的動(dòng)畫立即完成，并且重設(shè) show 和 hide 的原始樣式，調(diào)用回調(diào)函數(shù)等

$('#stort').click(function(){  $('#box').animate({  left : 600 },3000).animate({  top : 200  },3000) }); $('#stop').click(function(){ /*   * stop()方法沒(méi)有接收任何參數(shù)時(shí) - 立即停止執(zhí)行動(dòng)畫  * stop(queue)方法的第一個(gè)參數(shù)   * false - 表示停止當(dāng)前動(dòng)畫,但隊(duì)列中的動(dòng)畫繼續(xù)執(zhí)行   * true - 表示停止當(dāng)前動(dòng)畫,并且清空動(dòng)畫隊(duì)列  * stop (queue,gotoEnd)方法的第二個(gè)參數(shù)   * false - 不會(huì)做任何處理   * true - 表示停止當(dāng)前動(dòng)畫，并且將指定元素設(shè)置為動(dòng)畫執(zhí)行完畢后的樣式 */  $('#box').stop(true,true); });

延遲執(zhí)行動(dòng)畫

jQuery 提供了 delay() 方法用于設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目，具體語(yǔ)法如下:

$element.delay(duration, queueName]);

duration : 延時(shí)時(shí)間，單位為毫秒。

queueName : 隊(duì)列名詞，默認(rèn)是Ex，動(dòng)畫隊(duì)列。

$('#box').animate({  left : 600 },3000).delay(1000).animate({  top : 200 },3000);

相關(guān)視頻教程推薦：jQuery視頻教程