CODEWITHSUNDEEP
javascriptjqueryanimation
RyanH
RyanH

Reputation: 79

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, 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 :)!!

Upvotes: 0

Views: 190

Answers (3)

lumberjacked
lumberjacked

Reputation: 976

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.

Upvotes: 1

Stefan Ticu
Stefan Ticu

Reputation: 2103

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

Upvotes: 1

Brian
Brian

Reputation: 622

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

Upvotes: 0

Related Questions