封裝了一個JS方法，可支援塊元素的常規動畫：高、寬、透明度、位置等，同時支援鏈式動畫和同時運動，參照imooc整理，具體程式碼如下：

/**
* 獲取HTML元素屬性值
* obj是Element， attr是屬性
**/
function getStyle(obj, attr) {
if (obj.currentStyle) {
　　// IE瀏覽器
　　return obj.currentStyle[attr];　
　} else {
　　// Google、Firefox等
　　return getComputedStyle(obj, false)[attr];
}
}
/**
* 主函式，實現元素動畫。
* obj是Element， attrJson是屬性及其目標值的JSON，fn是運動完成後的回撥函式，根據回撥函式實現鏈式動畫
*/
function startMove(obj, attrJson, fn) {
　// 1. 清空該元素的定時器
clearInterval(obj.timer);
// 變數flag 記錄運動是否需要停止
var flag = true;
　// 2. 開啟該元素的定時器，間隔時間可重設
　obj.timer = setInterval(function() {
// 遍歷attrJson，獲取需要運動的屬性，對每個屬性進行改變
　　for (var attr in attrJson) {
// 屬性目標值
var iTarget = attrJson[attr];
// 獲取原本屬性值
var iCur = 0;
if (attr == 'opacity') {
　　　　 // 對透明度(opacity)單獨處理
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
// 判斷此屬性的運動是否已經完成
if (iTarget == iCur) {
continue;
}
flag = false;
// 8為速度係數，可重設
var speed = (iTarget - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')';
obj.style[attr] = (iCur + speed)/100;
} else {
obj.style[attr] = iCur + speed + 'px';
}
}
// 全部屬性均已經運動完成
if (flag) {
clearInterval(obj.timer);
// 如果有回撥函式，開啟下一個回撥函式
if (fn) {
fn();
}
}
　}, 30);
}

呼叫程式碼如下：

window.onload = function() {
var li1 = document.getElementById("li1");
li1.onmouseover = function() {
startMove(this, {width:400, height:200, opacity:100});
};
li1.onmouseout = function() {
startMove(this, {width:200, height:100, opacity:30});
}
}