Hi,

It seems a straightforward thing but I'm not having much success. I'm just implementing a simple 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