Problems with zepto animation ids

Question

Whenever I try to animate an image with Zepto, it works fine. But I can only access it with the name of the tag I used to activate it, not it's id. For example,

<img id="circle" name="circle" height="100" width="100" src="images/circle.png"/>

will animate with the line

$('img').anim({translateX: '0px', translateY: '0px'}, speed, 'linear');

but not with the line

$('circle').anim({translateX: '0px', translateY: '0px'}, speed, 'linear');

The main problem here is that trying to animate one will animate every image on the page. Does anyone know what's causing this?

I've tried changing it to "circle" and using getElementById instead of $, but those don't work either, at least not for animation.

Answer 1

You have to add a '#' for an id selector, just like CSS:

$('#circle').blah();

'img' works because it is selecting the 'img' element.

You can also use '.x' for classes, and so on.

See here.

Answer 2

Using the ID is the best method, but if you do want to use the name then you can do this...

$('img[name="circle"]').anim({translateX: '0px', translateY: '0px'}, speed, 'linear');