var a = function(p){
    return -(Math.cos(Math.PI * p) - 1) / 2;
};
var b = document.getElementById("myElement")
a.time = 0;
a.set = function(now){
    b.style.width = now + 'px'
    return this
}
a.$chian = []
a.chain = function(x){
    a.$chain.push(x)
}
a.complete = function(){
    clearInterval(a.Timer)
}
a.from = 100, a.to = 500;
var step = function(){
    var time = +new Date
    if (time < a.time + 500) {
        var delta = a((time - a.time) / 500);
        a.set(a.compute(a.from, a.to, delta));
    }
    else {
        a.set(a.compute(a.from, a.to, 1));
        a.complete();//
    }
}
a.compute = function(from, to, delta){
    return (to - from) * delta + from;
};a.check = function(){
    if (!this.timer) return true;
    this.chain(this.start.bind(this, arguments));
    return false;
}a.start = function(from, to){
    if (!this.check(from, to)) return this;
    this.from = from;
    this.to = to;
    var time = +new Date;
    this.time = time - this.time
    this.Timer = setInterval(step, 1)
    return this
}
a.start(300).start(0).start(600)

解决方案 »

  1.   

    下面这个是div代码
    <div id=myElement style="height:100px;width:100px;background-color:red">
      

  2.   

    不大明白LZ要干嘛,但调用a.start(300).start(0).start(600)时未初始化a.to,改为
    a.start(300).start(0).start(600,10)试试
      

  3.   

    <html>
    <body>
    <div id="myElement" style="background:black; width:50; height:50">
    </div>
    <script>
    var a = function(p){
        return -(Math.cos(Math.PI * p) - 1) / 2;
    };
    var b = document.getElementById("myElement")
    a.time = 0;
    a.set = function(now){
        b.style.width = now + 'px';
        return this
    }
    a.$chian = []
    a.chain = function(x){
        a.$chain.push(x)
    }
    a.complete = function(){
        clearInterval(a.Timer)
    }
    a.from = 100, a.to = 500;
    var step = function(){
        var time = +new Date
        if (time < a.time + 500) {
            var delta = a((time - a.time) / 500);
            a.set(a.compute(a.from, a.to, delta));
        }
        else {
            a.set(a.compute(a.from, a.to, 1));
            a.complete();//
        }
    }
    a.compute = function(from, to, delta){
        return (to - from) * delta + from;
    };a.check = function(){
        if (!this.timer) return true;
        this.chain(this.start.bind(this, arguments));
        return false;
    }a.start = function(from, to){
        if (!this.check(from, to)) return this;
        this.from = from;
        this.to = to||this.to;
        var time = +new Date;
        this.time = time - this.time
        this.Timer = setInterval(step, 1)
        return this
    }
    a.start(300).start(0).start(600)
    </script>
    </body>
    </html>只是按你意思把他动起来了.不过你要什么还是不清楚.