###程式碼如下：

/**
	 * 運動
	 * @param element 待新增運動動畫效果的 DOM 元素物件
	 * @param options 多屬性目標終值選項
	 * @param speed 限定運動的總時間
	 * @param fn 在運動結束後需要繼續執行的函式 
	 */
	function animate(element, options, speed, fn) {
		// 清除元素上已有的運動動畫計時器
		clearInterval(element.timer);

	// 多屬性初值、範圍值
	var start = {}, range = {};
	for (var attrName in options) {
		start[attrName] = parseFloat(css(element, attrName));
		range[attrName] = options[attrName] - start[attrName];
	}

	// 記錄開始運動的時間
	var startTime = +new Date();

	// 啟動計時器，實現運動動畫效果：將計時器 id 快取
	element.timer = setInterval(function() {			
		// 計算已經運動的時間
		var elapsed = Math.min(+new Date() - startTime, speed);

		// 多屬性按公式運算：線性運動
		for (var attrName in options) {
			// 公式：結果 = 運動時間 * 總範圍 / 總時間 + 起始
			var result = elapsed * range[attrName] / speed + start[attrName];
			// 設定CSS
			element.style[attrName] = result + ("opacity" === attrName ? "" : "px");
		}

		// 判斷是否停止計時器
		if (elapsed === speed) {
			clearInterval(element.timer);
			// 如果有運動結束後需要繼續執行的函式，則呼叫函式執行
			fn && fn();
		}
	}, 1000/60);
}

/**
 * 淡入
 * @param element 待新增淡入動畫效果的 DOM 元素物件
 * @param speed 限定運動的總時間
 * @param fn 在運動結束後需要繼續執行的函式 
 */
function fadeIn(element, speed, fn) {
	element.style.display = "block";
	element.style.opacity = 0;
	animate(element, {opacity: 1}, speed, fn);
}

/**
 * 淡出
 * @param element 待新增淡出動畫效果的 DOM 元素物件
 * @param speed 限定運動的總時間
 * @param fn 在運動結束後需要繼續執行的函式 
 */
function fadeOut(element, speed, fn) {
	element.style.display = "block";
	element.style.opacity = 1;
	animate(element, {opacity: 0}, speed, function() {
		element.style.display = "none";
		fn && fn();
	});
}