在同一持续时间内对两个属性进行动画处理

animate two properties within same duration

本文关键字:属性 两个 处理 动画 持续时间      更新时间:2023-09-26

我正在构建自己的动画库;这里是jsfiddle链接。

问题是当我尝试对多个属性进行动画处理时,一旦满足具有最后一个值的属性,动画就会完成。 例如:

我想将元素的topleft属性分别更改为 500 和 300。 动画以 topleft均为 300 完成。 这是不正确的。

我的代码结构类似于以下内容:

主要动画功能:

function animate(ele,prop,duration,easing,callback) {
    //...
}

动画管理器:

function Animation() {
    this.start = function(ele,prop,duration,easing,callback) {
        new animate(ele,prop,duration,easing,callback).start();
    };
}

请让我知道如何解决这个问题

http://jsfiddle.net/rrqe4qh1/1/

应用样式时

   this.ele.style[k]= val + 'px';

它也与其他属性的样式值冲突

添加以下检查帮助

   if(e===k)  this.ele.style[k]= val + 'px';