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!