警告：下面是丑陋的代码
var DOM = function (selector) {
this.animate = function (prop, times, callbacks) {
var el = document.querySelectorAll(selector);
var animate = function (element, props, time, callback) {
callback = callback || function () {};
time = time || 1000;
var timers = {}, // store the different interval timers so that they can be cancelled
calls = 0, // numbers of times the call would have been called
nprops = 0; // number of properties
for (var prop in props) {
(function (prop) {
var edit = prop == "scrollTop" ? element : element.style;
var stepCounter = [],
customStep = props[prop],
curr = edit[prop],
lastStepPercent = curr == "" ? (prop == "opacity" ? 1 : 0) : curr,
measure = prop == "scrollTop" || prop == "opacity" ? "" : "px",
stepper = function () {
edit[prop] = stepCounter[0] + measure;
stepCounter.shift();
};
if (props[prop].constructor == Number) customStep = [props[prop]];
for (var step = 0, len = customStep.length; step < len; step++) {
var from = parseInt(lastStepPercent),
to = parseInt(customStep[step]),
small = to < from,
numOfSteps = small ? from - to : to - from, // get current number of frames
multi = 30 * Math.round(parseInt(time) / 1000),
by = numOfSteps / (25 + multi) * len; // the stepper number
if (from == to) {
break;
}
for (var i = from; small ? i >= to : i <= to; i += small ? -by : by) {
stepCounter.push(i);
}
stepCounter.push(to);
lastStepPercent = customStep[step];
}
stepper();
timers[element + prop] = setInterval(function () {
stepper();
if (stepCounter.length == 0) {
clearInterval(timers[element + prop]);
calls++;
if (calls == nprops) {
callback.call(element);
}
}
}, time / stepCounter.length);
nprops++;
})(prop);
}
};
for (var i = 0; i < el.length; i++) {
animate(el[i], prop, times, callbacks);
};
return new DOM(selector); // re-initiate "JavaScript class" for chaining
}
};
var $ = function (selector) {
return new DOM(selector);
};
window.onload = function () {
document.getElementById("flip").onclick = function () {
var panel = document.getElementById("panel");
if (panel.style.height == 0) {
$("#panel").animate({
height: 100
}, 2000); // thats kinda slow...
} else {
$("#panel").animate({
height: 0
}, 2000); // thats kinda slow...
}
};
var request = window.XMLHttpRequest() ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
request.open("POST", "notes.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function () {
if (request.readyState == 4 && (request.status == 200 || request.status == 0 /*Fixes a FF bug*/ )) {
document.getElementById("inside1").innerHTML = request.responseText;
}
}
request.send();
};
我使用了我不久前创建的动画功能。请注意，这可能不起作用。这只是一个基本示例，说明您的代码在没有 jQuery 的情况下可以运行多长时间。它也可能不会完全按照您的 jQuery 代码所做的那样做。我不打算在这上面花一整夜，但我确实想向您展示我很快编写的代码。
它确实有效：http://jsfiddle.net/shawn31313/jm8ZR/1/
我在示例中删除了 AJAX 调用。但是动画功能可能会出现很多问题，所以请使用 jQuery。