Javascript/Jquery: using a variable in the css-property of animate

Question

Hi!

Why does this work:

<something>.stop().animate(
    { 'top' : 10 }, 10
);

but this doesn't:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

To make it even clearer: At the moment I'm not able to pass a css-property to the animate function as variable.

Thank you!

Answer 1

try var thetop = 'top';

Answer 2

In the second top isn't even defined. What error do you get?

Update: he updated his question based on this answer. :)

New answer, as already pointed out, that the names of objects can't be variables in object literals.

Answer 3

{ thetop : 10 } is a valid object literal. The code will create an object with a property named thetop that has a value of 10. Both the following are the same:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

You cannot use a variable as a property name inside an object literal. Your only option is to do the following:

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);