CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Titan
Titan

Reputation: 6060

Using a dynamic variable as object literal, jQuery animate function

Originally I had 

targetWater.animate({
    "width": "+=100%"

Now I want to dynamically use "width" or "height"

var direction = (targetWater.hasClass('x'))? "width" : "height";
targetWater.animate({
    direction: "+=100%"

But this doesn't work.

I've tried 

direction.toString()

and

''+direction+''

No joy with this either

var anim = { direction: "+=100%" }
targetWater.animate(anim,

Upvotes: 4

Views: 1162

Answers (6)

Halcyon
Halcyon

Reputation: 57721

Your approach doesn't work since direction is interpreted as a key, not a variable.

You can do it like so:

var animation = {};
var direction = targetWater.hasClass('x') ? "width" : "height"
animation[direction] = "+=100%";
targetWater.animate(animation);

The square brackets make it so you can have the key dynamically.

If you would want the key "direction" with the square bracket notation you would write:

animation["direction"];

which is equivalent to:

animation.direction;

Upvotes: 8

Bergi
Bergi

Reputation: 665485

No, you can't use variables inside keys. Either you build the object with bracket notation

var anim = {};
anim[ targetWater.hasClass('x') ? "width" : "height" ] = "+=100%";
targetWater.animate(anim, …

or you don't use an object

targetWater.animate(targetWater.hasClass('x') ? "width" : "height", "+=100%", …

Upvotes: 2

m90
m90

Reputation: 11822

You could use "Array-like" (bracket) notation to create the "right"/dynamic property:

var animation = {};
animation[targetWater.hasClass('x'))? "width" : "height"] = "+=100%";

targetWater.animate(animation);

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

I would suggest you to create it as a property and pass it to the .animate function. See below,

var direction = (targetWater.hasClass('x'))? "width" : "height";

var animProp = {};
animProp[direction] = "+=100%";

targetWater.animate(animProp, /*..*/);

Upvotes: 2

Christoph
Christoph

Reputation: 51261

You variable does not get interpolated, you need to define it the following way:

var options = {};
options[direction] = "+=100%";

targetWater.animate( options , /*...*/

Upvotes: 2

moonwave99
moonwave99

Reputation: 22820

Use bracket notation:

var anim = {};
anim[direction] = "+=100%";

Upvotes: 2

Related Questions