missing : after property id

Question

I'm a jquery novice..I got missing : after property id error appeared in the firebug console..I don't have much idea what's wrong with this code..

$('#mytable tr').click(function(){
   $(this).animate({padding-left: '+=50px'}, 2000);
  }, function(){
   $(this).animate({padding-left: '-=50px'}, 2000);
  });

Answer 1

- isnt valid for literal keys in object declarations. You need to wrap parentheses around any keys with dashes.

Try this:

$('#mytable tr').click(function(){
  $(this).animate({"padding-left": '+=50px'}, 2000);
}, function(){
  $(this).animate({"padding-left": '-=50px'}, 2000);
});

EDIT: Do you mean to toggle instead of click?

Answer 2

You can't use padding-left like this, you either need "padding-left" or paddingLeft for the property name, like this:

$('#mytable tr').toggle(function(){
  $(this).animate({'padding-left': '+=50px'}, 2000);
}, function(){
  $(this).animate({'padding-left': '-=50px'}, 2000);
});

Or this:

$('#mytable tr').toggle(function(){
  $(this).animate({paddingLeft: '+=50px'}, 2000);
}, function(){
  $(this).animate({paddingLeft: '-=50px'}, 2000);
});

In jQuery, anything property passed into .animate() or .css() with a capital in it gets replaced with -lower, so paddingLeft gets converted to padding-left under the covers.

Edit: As Reigel points out in comments, you can't bind multiple functions to click, I think you meant .toggle() which is what I put above, this swaps between functions on each click event.