Using a dynamic variable as an object literal, jQuery animation function

Question

I originally 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 that will not work.

I tried

 direction.toString() 

and

 ''+direction+'' 

No joy from this either

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

Answer 1

Your approach does not work, because direction interpreted as a key, not a variable.

You can do it like this:

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

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

---

If you need a "direction" key with a square bracket, you must write:

 animation["direction"]; 

which is equivalent to:

 animation.direction; 

Answer 2

Use parenthesis notation:

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

Answer 3

You do not get the interpolated variable, you need to define it as follows:

 var options = {}; options[direction] = "+=100%"; targetWater.animate( options , /*...*/ 

Answer 4

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

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

Answer 5

You can use the "Array-like" notation (parenthesis) to create a "correct" / dynamic property:

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

Answer 6

No, you cannot use variables inside keys. Or you create an object using notation brackets

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

or you are not using an object

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