Dynamically choosing css property in animation

It seems a straightforward thing but I'm not having much success. I'm just implementing a simple 开发者_Go百科animation moving a div left or up using animate() but I would like to be able to set the "top" and "left" css properties dynamically. I would like to use the same function rather than have to have two, one for "left" and one for "top".

Here's some code which gives the idea.

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);
    });
}

Variables works on the css value side but not on the css selector side. Anyone have any suggestions?

Thanks

See this: 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 for computed properties.

The "not working" part does not work because you just cannot use variable values to declare fields in JSON. To workaround this you should have (replacing the not working part) :

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

I found this solution great, but when I tested in Internet Explorer - unfortunately it did not work. Kept throwing error: "Expected identifier, string or number internet explorer dynamic property". So I went for a less elegant solution of creating an animation call for each condition, making sure to set queue to false because it needed to run at the same time and be applied to the same element that contained other animation. Eg:

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));