Jquery Selector Multiple Classes (this)

I have a page that lists content that ar开发者_JAVA技巧e 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>

---

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.

---

You could use the .children() selector:

$(this).children(".ad-contact").slideDown(1000);

This way you will only act on the class ad-contact if its a child of the object in context (which is the object currently being hovered)

See a working demo here

---

You should use event to handle this, First you need like ad-container.hover(function(event){ event.target.children();

})

and then this.show().delay(1000).hide();

the code sample provide may not work when copy paste you have to write your own code in editor.