jquery animation

Question

i dont know what is wrong with this code.. it will just don't work even if it has the same syntax with the other one..

$(document).ready(function(){ 
$("#inner").animate({height:'200',top:'-100'},1000);
  $("#inner").animate({width:'200',margin-left:'-100'},1000);
});

you can see the example here..

Answer 1

Try giving without px $("#inner").animate({width:'200',margin-left:'-250'},1000);

Or Look at this question on SO

It says,

try using "marginTop" instead of "margin-top". Normally when you use the CSS props as "border-something" or "margin-something" is better to use the "normalized" version of it, as you used to do it in DHTML (styles.marginTop).

So change it to, $("#inner").animate({width:'200',marginLeft:'-250'},1000);

Or

you can also use redsquare's answer...

Answer 2

You need to quote the margin-left attribute since the hyphen is a reserved js operator.

See update to your demo

Try

$(document).ready(function(){ 
$("#inner").animate({height:'200',top:'-100'},1000);
  $("#inner").animate({width:'200','margin-left':'-100'},1000);
});