I have a sprite image than when mouseenter/mouseleave occurs over it, the background position changes.This is working so far although there is probably a more efficient way of doing it. However I have several images I need to do this with and am trying to find a way to feed the id of the image into the jQuery rather than duplicate code.   

The HTML:

```
<div class='featSmallBox' id='featSmallImg2'>
</div>

```

The image source is placed using CSS.  

This is what I have so far for the jQuery.

```
 $("#featSmallImg2").mouseenter(function(){
                    $(this).animate({
                   backgroundPositionX:"100%"
                     });
                   });

 $("#featSmallImg2").mouseleave(function(){
                    $(this).animate({
                   backgroundPositionX:"0%"
                     });
                    });

```

Ideally I need to feed in the id of what is being mouseentered dynamically, but everything I've tried doesn't seem to work.   

Apologies if this makes little to no sense. I'm new to both jQuery and this site.