Question

I have a page that lists content that are contained in a div with a class ad-container. in that container there is a hidden div with the class ad-contact. on the hover of the ad class i want to animate the display of ad-info. since there are multiple ads on a paticular page, i want only the ad-info of the currently hovered ad-container to slide in. my problem is that since there are more than 10 ads a page when you hover over any of the ads, all of the ads-contact divs slideDown and not the one you are hovering over.

$(document).ready(function() {
    $('.ad-container').hover(
                             function(){
                                 $(".ad-contact").slideDown(1000);
                             },
                             function(){
                                 $(".ad-contact").slideUp(1000);
    });

});

i think, (this) is used here but im not sure. and this would really shed the light for me.

<div class="ad-container">

        <div class="ad-title">title<span class="ad-title-img">(pic)</span></div>
        <div class="ad-description">texttext</div>
        <div class="ad-contact" style="display:none">contact poster</div>
        <div class="ad-sellerinfo" style="display:none">* Verified ***-****<br />
Paid Member</div>
      </div>

Answer 1

The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection. Something like this should work:

$(document).ready(function() {
    $('.ad-container').hover(
                             function(){
                                 $(".ad-contact", this).slideDown(1000);
                             },
                             function(){
                                 $(".ad-contact", this).slideUp(1000);
    });

});

Also, worth mentioning, $(".ad-contact", this) is internally converted into: $(this).find(".ad-contact") so you can use this one instead, it might be slightly faster.