###代码如下:
/**
* 运动
* @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();
});
}