jQuery Fade In Fade Out On MouseOver Via Multiple Images In A Div

So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.

Thank you very much for future answers (and possible explanat开发者_如何转开发ions), Aaron Brewer

You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.

HTML

<div class="img-container">
   <img src="a.jpg" alt="a" />
</div>

<div class="img-container">
   <img src="b.jpg" alt="b" />
</div>

<div class="img-container">
   <img src="c.jpg" alt="c" />
</div>

jQuery

$('.img-container').each(function() {

   // Get a reference to the image.    
   var img = $(this).find('img');

   // Hide by default.
   img.hide();

   $(this).hover(function() {
       img.stop().fadeIn(500);
   }, function() {
       img.stop().fadeOut(500);
   });

});

perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/