I can't figure out the bug in this jQuery.

Question

The page having problems is... http://schnell.dreamhosters.com/index.php?page=gallery#

I use Firebug to debug my jQuery and other code tidbits and it's been proving very useful for Javascript/jQuery debugging. However, at the same time, it's been one of the most frustrating debugging experiences I've ever gone through. I'm not sure why but sometimes it seems like I can copy someone else's methodology from a tutorial, character for character, and yet still come up with errors.

In any case, the problem here is that Firebug claims there is a bug on line 20 of the source.

missing : after property id [Break on this error] $('#table').animate({"left: " + attr + "px"}, 2000);\n

This bug seems like a huge load to me because the colon is right there! And this is why debugging jQuery/Javascript is such a pain sometimes. The error messages are rather convoluted and sometimes don't even make a lick of sense to me. Or maybe that's just Firebug.

Either way, the goal I'm going for here is that I'm trying to dynamically change the animate function such that the more you click the left arrow, the further left the grid of images is shifted (due to the nature of the CSS 'left' property). I have Javascript variables and a hidden input tag to help hold essential values, but the major hurdle is getting the animate function to recognize these variables. Near as I can tell it will only accept string literals for arguments on how to animate and the documentation doesn't help me because it doesn't discuss the use of variables with animate, as if it's impossible.

Well, let's just say I don't like impossible, he likes to get in my way a lot.

Answer 1

The object literal passed to the animate function is not well formed, it should be:

$('#table').animate({left: attr + "px"}, 2000);

Edit: Looking closely to your code, you are also trying to get a value from an input with id = "count", and you have a missing # character to have an ID selector:

var count = +$('#count').val(); // get #count value as Number

You are also incrementing this count variable, but you should first convert it to Number, because the value attribute of input elements are string. (I did it using the unary plus operator on the right-hand side of the assignment).

You have to convert it to a number, because if you add two variables and one of them is a string, concatenation will take place:

 "1" + 1 == "11"

Answer 2

Try:

$('#table').animate({left: attr}, 2000);

The "px" units of measurement here aren't necessary. That aside, the above is the correct creation of an anonymous object. You were just putting a string inside curly braces.