Changing images with JQuery and the fade effect

Posted by Chris Barnes Sun, 15 Feb 2009 10:14:00 GMT

Photo by me!

It took me a bit of digging to figure out how to fade out a picture, change the src, then fade it back in. I started out trying to use Scriptaculous but I got stuck trying to get the queue setup to wait until the image was faded out to change the src. I ended up using jQuery which also gave me a bonus, the solution is unabtrusive.

Here are the application.js and show.html.haml files from my project.

Posted in Ruby on Rails, Javascript
Tags Javascript, JQuery, rails, ruby
Meta no trackbacks, 7 comments, permalink

Trackbacks

Use the following link to trackback from your own site:
http://blog.randomutterings.com/articles/trackback/32

Comments - Leave a response

Lokoder 8 months later:

Thanks from Brazil ;)
camera stores sydney 11 months later:

Don’t stop writing, you’ve given me lots of good info!
cheap tiffany co jewelry over 2 years later:

I am profoundly grateful, touched by the great distinction and honor and great compliment accorded me by the authorities of Harvard this morning. I am overwhelmed, as a matter of fact, and I am rather fearful of my inability to maintain such a high rating as you've been generous enough to accord to me. In these historic and lovely surroundings, this perfect day, and this very wonderful assembly, it is a tremendously impressive thing to an individual in my position.tiffany and co outlet
Hancy over 2 years later:

Hello Friend,Whichever style of Fashion Shoes you're looking for, classical, fashionable, lovely or the latest design, you can find your favorite designer shoes in www.dunkpage.com ,several days ago I bought one pair of shoes from there,It's beautiful and very comfortable!
sushil over 2 years later:

I clicked on the thumbnails above, but noticed no change on the big image. Please look into it.
id meneo over 2 years later:

Thanks, I was looking for that. I'm also looking for a way to make the image change automatically.
Dadooo over 2 years later:

for some reasons i got an error and delay while loading multiple images... use $("#medium_photo").attr('src',src).unbind(); after loading is complete

Categories