[jQuery] simple beginner question

[jQuery] simple beginner question


I'm doing a logo display for my company site and I want the caption to
fade in each time you hover over the logo and to fade out when you
hover away. I've got that part squared away, but I wanted to know how
to edit my code so that i can reuse my classes for each logo on the
page. Right now if i hover over a logo, the text for each one fades in
and fades out at the same time. I'm too new to scripting to know quite
how to do it. I was thinking maybe using jquery's .each() method or a
for each loop, but i don't know ... can anyone help put me on the
right path?!
here's the jquery
$(document).ready(function(){
$(".logo").hover(function(){
$(".caption").animate({opacity:"show"}, "fast");
},
function(){
$(".caption").animate({opacity:"hide"}, "slow");
});
});
.logo is the over all box, and it includes .caption, which fades in
html:
<div class="logo">
<div class="logoHead">Liquid Video</div>
<img src="images/logo.png" />
<div class="caption">We did the LVT logo.
<!--close caption-->
</div>
<!--close logo-->
</div>
so how do i only act on one logo at a time without having to
individually number each logo on the page?
Thanks!
(if you see this reposted multipled times, it's b/c it was never
showing up after i initially posted it and i kept trying)