title: jquery hover image fade swap
body: <p>I have been searching online for awhile, trying to find the best way to write a jquery script that does this simple task: swapping an image on hover with an elegant fade effect. I have found many solutions (some way to cumbersome and clunky), and narrowed it down to what I see as the two best:</p>
  
  <p><a href="http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/" rel="noreferrer">http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/</a></p>
  
  <p><a href="http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" rel="noreferrer">http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/</a></p>
  
  <p>For my purposes, I want to be able to do this hover swap numerous times on one page. The page is <a href="http://www.vitaminjdesign.com" rel="noreferrer">http://www.vitaminjdesign.com</a>. I currently have hovers on my "services nav" (different type of hover) but I want to apply them to all of the nav buttons, as well as the social icons in the footer. All of the hovers will be the same- two image files, one fading in to the other on hover, and returning on leave. What is the best possible way to go about this? One of the above links perhaps?</p>