jquery image transition

I have a button in a website that I'm making for a college project (Website that sells music). Im using a buy button which looks like the one from Apple's app store:

image1 http://ryanholder.co.uk/img/buy_button_5.99.png

image2 http://ryanholder.co.uk/img/ibutton_buynow.png

I was yondering if anybody knows some JQuery which I could use, or if you could create some,开发者_如何学Python so that i can click on the First image and it transitions to the secound image. Kinda like if you click on it in the actual iTunes app store.

*And if you can a way to transition back to the previous image

And before you say dude this is obviously copyright. I am ony using this design for a college project, not an actual website ;)

Thanks in advance :)!!

$('#my_button').click(function(){
   if ($(this).css('background-image') == 'first_image'){
      $(this).css('background-image', 'second_image')
   } else {
      $(this).css('background-image', 'first_image')
   }
})

http://designbeep.com/2010/05/13/25-very-detailed-jquery-image-and-content-slider-tutorials/. Being a college project we wouldn't want to take all the fun out of learning.

If you were to put both images into one file and then simply change the visible coordinates with jquery. Digging up example. BRB