[jQuery] Re: simple beginner question

Charlie Thu, 18 Jun 2009 13:24:55 -0700

you're each idea is right on track

$(".logo").each(function(){

        $(this).hover(function(){ /// *this* within an *each* will single out the individual .logo you hover over
            $(this).find(".caption").animate({opacity:"show"}, "fast");// look within this .logo only
            },
            function(){
            $(this).find(".caption").animate({opacity:"hide"}, "slow");
        });
    });

mojoeJohn wrote:

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="" />
    <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)

[jQuery] Re: simple beginner question

Reply via email to