Question

这似乎是一件简单的事情，但我没有取得多大成功。我只是实现了一个简单的动画，使用animate（）向左或向上移动div，但我希望能够动态设置“top”和“left”css属性。我想使用相同的功能，而不是必须有两个，一个用于“左”，一个用于“顶部”。

这里有一些代码可以提供这个想法。


function test($element){
    $element.click(function(){
        var cssProperty;
        var direction = "left";
        var moveTo = "100px";

        if (direction === "top") {
            cssProperty = "top";
        } else {
            cssProperty = "left";
        }

        /*Using variable as CSS property - This doesn't work */
        $(this).animate({ 
            cssProperty: moveTo
        }, 1000);

        /*Using variable as the CSS Values - This does */
        $(this).animate({ 
            left: moveTo
        }, 1000);
    });
}

变量适用于css值侧，但不适用于css选择器侧。有人有什么建议吗？

由于

Answer 1

请参阅：http://www.jibbering.com/faq/faq_notes/square_brackets.html

function test($element){
    $element.click(function(){
        var cssProperty;
        var direction = "left";
        var moveTo = "100px";
        var animationProperties = {};

        if (direction === "top") {
            cssProperty = "top";
        } else {
            cssProperty = "left";
        }

        animationProperties[cssProperty] = moveTo;

        // This does work.
        $(this).animate(animationProperties, 1000);

        // Or else, using computed properties introduced in ES6.
        $(this).animate({
            [cssProperty]: moveTo
        }, 1000);
    });
}

对于Browser support，

computed properties。

Answer 2

“不工作”部分不起作用，因为您无法使用变量值来声明JSON中的字段。要解决此问题，您应该（替换不工作的部分）：

// Create an empty object
var newStyle = { };
// Add a dynamically named field
newStyle[cssProperty] = moveTo;
// Start the animation
$(this).animate(newStyle, 1000);

Answer 3

我发现这个解决方案很棒，但是当我在Internet Explorer中测试时 - 遗憾的是它没有用。保持投掷错误：＆＃34;预期的标识符，字符串或数字Internet Explorer动态属性＆＃34;。所以我选择了为每个条件创建动画调用的不太优雅的解决方案，确保将队列设置为false，因为它需要同时运行并应用于包含其他动画的同一元素。例如：

if (directionX == "right"){
    $(this).animate({"right": amountX},{duration: 600, queue: false});
} else if (directionX == "left"){
    $(this).animate({"left": amountX},{duration: 600, queue: false});
}
if (directionY == "top"){
    $(this).animate({"top": amountY},{duration: 600, queue: false});
} else if (directionY == "bottom"){
    $(this).animate({"bottom": amountY},{duration: 600, queue: false});
}
$(this).animate({
    "backgroundSize": bigWidths_array[itemNum],
    "width":          bigWidths_array[itemNum],
    "height":         bigHeights_array[itemNum]},
    600, false, showBigText(itemNum));

在动画中动态选择css属性

3 个答案: