Jump to content

Pass variable to animate function


Drongo_III

Recommended Posts

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

Link to comment
Share on other sites

"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'];

Link to comment
Share on other sites

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'];

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.