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!

Reply via email to