CODEWITHSUNDEEP
jquery
patocallaghan
patocallaghan

Reputation: 305

Dynamically choosing css property in animation

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

Upvotes: 4

Views: 2289

Answers (3)

Ben
Ben

Reputation: 1

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

Upvotes: 0

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179109

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.

Upvotes: 3

Shtong
Shtong

Reputation: 1787

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

Upvotes: 0

Related Questions