Drongo_III Posted June 18, 2012 Share Posted June 18, 2012 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 Quote Link to comment Share on other sites More sharing options...
Adam Posted June 18, 2012 Share Posted June 18, 2012 "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']; Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted June 18, 2012 Author Share Posted June 18, 2012 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']; Quote Link to comment Share on other sites More sharing options...
Adam Posted June 18, 2012 Share Posted June 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
Adam Posted June 18, 2012 Share Posted June 18, 2012 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); Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted June 19, 2012 Author Share Posted June 19, 2012 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); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.