Is it possible to make jQuery only the target div for hover animation if it is a child of the element hovering over it?

Question

Ok, I'm new to Javascript and jQuery, so this might be a very simple question, but I tried to research it and can't find any good answers.

On my website:

http://joeyellisdesign.com/testingspace/JE2

I have a rollover in the "work" section of my portfolio, which I try to do only when you hover over an individual image.

To set up the animation, I have this code:

jQuery $(document).ready(function(){ $(".project").hover(function(){ $(".projectdescription").animate({top:'4px'}); },function(){ $(".projectdescription").animate({top:'183.77px'}); }); }); 

In addition, CSS and HTML are provided here.

 <div class="project"> <a class="workanchor" href="#"> <img src="files/workthumbs/finsons.jpg"> <div class="projectdescription"> <h4>FINSON BEARD PRODUCTS</h4> <p>Packaging and Identity</p> <img class="plus" src="files/plus.png" width="129" height="129"> </div> </a> </div> .project { width: 295px; height: 240px; margin: 0px 1.25% 7%; padding: 0px; float: left; overflow: hidden; position: relative; } #workcontainer .project .projectdescription { background: #FFF; margin: -4px 0px 0px; padding: 0px; width: 100%; height: 240px; position: absolute; top: 183.77px; } #work #workwrapper #workcontainer .project .workanchor .projectdescription .plus { margin: 30px 0px 0px 83px; padding: 0px; height: 129px; width: 129px; 

}

Thank you in advance for any help and / or information that I don’t know anything .;)

Answer 1

 $(".project").on('mouseenter mouseleave', function(e){ $(".projectdescription", this).animate({top: e.type=='mouseenter' ? '4px' : '183.77px'}); }); 

Fiddle

Answer 2

Try:

 $(".project").hover(function(){ $(this).find(".projectdescription").animate({top:'4px'}); },function(){ $(this).find(".projectdescription").animate({top:'183.77px'}); });