Pass variable to animate function

[Drongo_III]

Hi Guys

 

Simple question, and probably a simple answer if you know how...

 

I'm trying to pass a variable to the jquery animate function. So lets say I have

var theSide = 'marginLeft';
$('#animDiv').animate({theSide: 400}, 400);

 

Putting the variable in the animation, instead of actually writing marginLeft, simply means the animation doesn't work :/ So two questions:

 

[*]Why doesn't it work?

[*]What should i do to get it working?

 

Really want to understand this better!

 

Thanks,

 

Drongo

[Adam]

"theSide" is being parsed as a property, not a variable. In order to use a variable as a property name, you need to define it in the array style syntax:

 

var theSide = 'marginLeft';

var options = {};
options[theSide] = 400;

$('#animDiv').animate(options, 400);

 

You can use that syntax for accessing any object's property -- for example:

 

var html = element['innerHTML'];

[Drongo_III]

Hi Adam

 

Thanks for your response. Bear with me whilst i try to understand this.

 

Your code works perfectly but I don't quite follow what's going on.

 

Is this right...

 

In your code the key for the 'options' array takes on the value of 'theSide' var, which equals 'marginLeft'.

 

Then we give that key a value of 400. 

 

But how does simply writing 'options' then translate into something equivalent to

 

animate({marginLeft:400}, 400);

 

Or is it a javascript thing that putting the name of the array in that context means that it gets printed as it's key and value pair?? I am a tad confused on this last bit.

 

And if that is the key, could you have multiple values in the array and they'd all get interpreted?

 

Thank you for you patience...i feel there is something quite fundamental i need to understand here...

"theSide" is being parsed as a property, not a variable. In order to use a variable as a property name, you need to define it in the array style syntax:

 

var theSide = 'marginLeft';

var options = {};
options[theSide] = 400;

$('#animDiv').animate(options, 400);

 

You can use that syntax for accessing any object's property -- for example:

 

var html = element['innerHTML'];

[Adam]

In JS you can't have "variable variables" like in PHP, because there's no way of determining what's meant to be a variable and what's meant to be the actual name of the variable/property. However, JS does provide an alternative way of accessing object properties, which is the array-like syntax (I stress like, because they're not actually arrays.) Given we reference the name of the property as a string, it means we can manipulate it and pass a variable instead.

 

So in the code, we first define options as an empty object:

 

var options = {};

 

Then using the array-like syntax, we set the "marginLeft" property of the object:

 

options[theSide] = 400;

 

So at this point, options is equal to:

 

{marginLeft: 400}

 

We can then  pass that variable into the animate() method as an argument:

 

$('#animDiv').animate(options, 400);

 

Which is exactly the same as:

 

$('#animDiv').animate({marginLeft: 400}, 400);

 

The only difference is we've stored the object within a variable.

[Adam]

If you're more familiar with PHP, here's the equivalent that might explain it better:

 

$options = new stdClass;
$options->$theSide = 400;

$foo->animate($options, 400);

[Drongo_III]

Hi Adam

 

That makes a lot of sense now. Thank you so much for taking the time.

 

I think the php version especially helped me to get it as JS isn't my strongest point!

 

BIG thanks for your time!

 

Drongo

 

If you're more familiar with PHP, here's the equivalent that might explain it better:

 

$options = new stdClass;
$options->$theSide = 400;

$foo->animate($options, 400);