Question

我有一些几乎相同的CSS动画函数用于JavaScript“类”。我在下面发布的是高度，但我也有一些宽度，左边等等。对于基本相同的任务有不同的功能似乎相当多余，我可以用下面的函数替换下面函数中的高度一种CSS属性参数？

WindowItem.prototype.animateHeight = function(inElement, inTarget) {
    var selfCall = true;
    var currHeight = parseInt(inElement.style.height, 10);

    if (this.isExpanded) {
        if (currHeight < inTarget) {
            currHeight += ((inTarget-currHeight)>>3)+1;
            if (currHeight >= inTarget) {
                currHeight = inTarget;
                selfCall = false;
            }
        }
    }
    else {
        if (currHeight > inTarget) {
            currHeight -= ((currHeight-inTarget)>>3)+1;
            if (currHeight <= inTarget) {
                currHeight = inTarget;
                selfCall = false;
            }
        }
    }
    inElement.style.height = currHeight+"px";

    if (selfCall) {
        var self = this;
        setTimeout(function() {
            self.animateHeight(inElement, inTarget);
        }, 33);
    }
}

编辑：我可能也应该发布我的调用方式，我不知道在此示例中要传递的函数指定高度：this.animateHeight(this.imgWindow, 0);

Answer 1

我在评论中写道：

如果要对给定的任何属性使用此函数，可以使用参数

this.animateProperty(this.imgWindow, 0, "height");

其中

WindowItem.prototype.animateHeight = function(inElement, inTarget, cssProperty)
...

而不是

inElement.style.height

使用

inElement.style[cssProperty]

将CSS属性作为参数传递给JavaScript函数

1 个答案: