Why does the following work?
<something>.stop().animate(
{ 'top' : 10 }, 10
);
Whereas this doesn't work:
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 a variable.
Given code:
Translation:
As you can see, the
{ thetop : 10 }
declaration doesn't make use of the variablethetop
. Instead it creates an object with a key namedthetop
. If you want the key to be the value of the variablethetop
, then you will have to use square brackets aroundthetop
:The square bracket syntax has been introduced with ES6. In earlier versions of JavaScript, you would have to do the following:
ES5 implementation to assign keys is below:
I've attached a snippet I used to convert to bare object.
Adding square bracket around the variable works good for me. Try this