<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/stylesheets/rss.css"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
  <channel>
    <title>random utterings...: Changing images with JQuery and the fade effect</title>
    <link>http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect</link>
    <language>en-us</language>
    <ttl>40</ttl>
    <description></description>
    <item>
      <title>Changing images with JQuery and the fade effect</title>
      <description>&lt;p class="credits"&gt;&lt;img style="width:600px;" src="http://blog.randomutterings.com/images/articles/gallery.png"&gt;&lt;br&gt;Photo by &lt;a href="http://www.flickr.com/photos/randomutterings/"&gt;me!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here are the application.js and show.html.haml files from my project.&lt;/p&gt;

&lt;script src="http://gist.github.com/64723.js"&gt;&lt;/script&gt;



</description>
      <pubDate>Sun, 15 Feb 2009 10:14:00 +0000</pubDate>
      <guid isPermaLink="false">urn:uuid:3c3f2d0f-45b6-4208-8135-cb9a144b2694</guid>
      <author>Chris Barnes</author>
      <link>http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect</link>
      <category>Ruby on Rails</category>
      <category>Javascript</category>
      <category>ruby</category>
      <category>rails</category>
      <category>Javascript</category>
      <category>JQuery</category>
      <trackback:ping>http://blog.randomutterings.com/articles/trackback/32</trackback:ping>
    </item>
    <item>
      <title>"Changing images with JQuery and the fade effect" by camera stores sydney</title>
      <description>Don&#8217;t stop writing, you&#8217;ve given me lots of good info!
</description>
      <pubDate>Wed, 27 Jan 2010 03:06:34 +0000</pubDate>
      <guid isPermaLink="false">urn:uuid:c62e6e95-08a6-47ed-9e84-b78f451b04ac</guid>
      <link>http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect#comment-5382</link>
    </item>
    <item>
      <title>"Changing images with JQuery and the fade effect" by Lokoder</title>
      <description>Thanks from Brazil ;)</description>
      <pubDate>Wed, 14 Oct 2009 13:25:56 +0000</pubDate>
      <guid isPermaLink="false">urn:uuid:9b3f4a99-0e81-453c-b145-6e2fd7243fba</guid>
      <link>http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect#comment-4963</link>
    </item>
  </channel>
</rss>
