14js模拟手风琴效果

sport2.js

/**
 * 
 * @param obj 运动的元素
 * @param target 目标值 
 * @param attr 操作属性 
 * @param callback 回调函数
 */
function startMove(obj,target,attr,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var current = parseFloat(getStyle(obj,attr));
        var speed = 0;
        if (attr === "opacity") {
            speed = target - current > 0 ? 0.1: -0.1;
        } else {
            speed = (target - current)/10; //    
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        }
            //  
        if (current === target) {
            clearInterval(obj.timer);
            // 上一个动作执行完 进入下一个动作
            if (callback) {
              callback();
            }
        } else {
            if (attr === "opacity") {
                obj.style[attr] = current + speed
            } else {
               obj.style[attr] = current + speed + "px";
            }   
        }
    },20);
}


function getStyle(obj,attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj,false)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}

效果图

six.gif