這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何實現(xiàn)自定義動畫，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有漢南免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

自定義動畫用到的幾個框架函數(shù)：

$("Element").animate(params[,duration[,easing[,callback]]])
[quote]用于創(chuàng)建自定義動畫的函數(shù)。
這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。 
注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left，如果有不懂得駱駝命名法的朋友請看三種通用CSS規(guī)范化命名的規(guī)則。
而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。
params
(Options) : 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
duration (String,Number) : (可選) 三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000)
easing (String) : (可選) 要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
callback (Function) : (可選) 在動畫完成時執(zhí)行的函數(shù)
$("Element").animate(params,options)
同上
params (Options)
: 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
options (Options)
: 一組包含動畫選項的值的集合

$("Element").stop()
停止指定元素上正在運行的動畫
$("Element").queue()
返回指向第一個匹配元素的隊列，常與length配合使用；可以將其理解為數(shù)組，一個動畫數(shù)組中包含了好幾個效果，queue().length表示獲得當(dāng)前所執(zhí)行的第一個效果。

通過以上函數(shù)實現(xiàn)自定義動畫效果：

（1）實現(xiàn)一個動畫queue，在循環(huán)展現(xiàn)每個動畫：

	$(function() {
		$("#show").click(function() {
			var n = $("div").queue();
			$("span").text("Queue length is: " + $("div").queue().length);
		});
		runIt();
	});

	function runIt() {
		$("div").show("slow");
		$("div").animate({
			left : '+=200'
		}, 2000);
		$("div").slideToggle(1000);
		$("div").slideToggle("fast");
		$("div").animate({
			left : '-=200'
		}, 1500);
		$("div").hide("slow");
		$("div").show(1200);
		$("div").slideUp("normal", runIt);
	}




	Show Length of Queue
	
	

（2）

	$(function() {
		$(document.body).click(function() {
			$("div").show("slow");
			$("div").animate({
				left : '+=200'
			}, 2000);
			$("div").queue(function() {
				$(this).addClass("newcolor");
				$(this).dequeue();
			});
			$("div").animate({
				left : '-=200'
			}, 500);
			$("div").queue(function() {
				$(this).removeClass("newcolor");
				$(this).dequeue();
			});
			$("div").slideUp();
		})
	});




	Click here...
	

（3）

	$(function() {
		$("#start").click(function() {
			$("div").show("slow");
			$("div").animate({
				left : '+=200'
			}, 5000);
			$("div").queue(function() {
				$(this).addClass("newcolor");
				$(this).dequeue();
			});
			$("div").animate({
				left : '-=200'
			}, 1500);
			$("div").queue(function() {
				$(this).removeClass("newcolor");
				$(this).dequeue();
			});
			$("div").slideUp();
		})

		$("#stop").click(function() {
			$("div").queue("fx", []);
			$("div").stop();
		})
	});




	Start
	Stop
	

（4）

	$(function() {
		$("button").click(function() {
			$("div").animate({
				left : '+=200px'
			}, 2000);
			$("div").animate({
				top : '0px'
			}, 600);
			$("div").queue(function() {
				$(this).toggleClass("red");
				$(this).dequeue();
			});
			$("div").animate({
				left : '10px',
				top : '30px'
			}, 700);
		});
	});




	Start
	

關(guān)于“JavaScript如何實現(xiàn)自定義動畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)站名稱：JavaScript如何實現(xiàn)自定義動畫-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/edppj.html