I'm quite new to Javascript and jQuery and question may be "un grand classic" (sorry I'm french lol) but I did not found any suitable answer for my issue on the www.

So, I'm trying to make a rollover on a sprite image with a fading effect using jQuery.

Here are my CSS for the sprite:

2. .img-sprite{display:block; width:300px; height:300px; background-color:transparent; background-repeat:no-repeat; background-position: 0 0; }
3. .img-sprite:hover{background-position : 0 -300px; }
4. #img1{background-image: url(../images/home/image1.jpg); }
5. #img2{background-image: url(../images/home/image2.jpg); }

And my HTML:

1. <a class="img-sprite" id="img1" href="page.html"></a>

I've tryed serveral possibilities found on the web for my fading effect but in one case it was indeed fading effect on sprite images but... linked with a menu (with <ul> <li> eso...) and I didn't manage to adapt it to my .css 

And on the other case it was fading effect but with 2 separate images...(and no sprite).

I tried this last case and it works well but the therefore the code becomes "heavy" and in stand to discover and learn more about jQuery I wish I could make the same effect with an image sprite... that's why I need your precious help.

Thanks a lot  ! 

M.S