make child div animate on hover of parent div

Question

I am trying to get the child div to animate on hover of its parent container div. But currently I am only able to get the entire div to move and they all move in every div. here is my code, If someone could help me get just the child div of the parent div that is being hovered to animate that would be great.

<div class="parent">
    <div class="child">child</div>
</div>
<div class="parent">
    <div class="child">child</div>
</div>
<div class="parent">
    <div class="child">child</div>
</div>

    <script>
        $(".parent").hover(function() {
            $("this.child").animate({
                top: '-10px'
                }, 500);
            }, 
            function() {
                $(this).stop(true,true).animate({ top: "10px" }, 500);
            });
    </script>
<style>
      .parent {
        width:100px;
        height:100px
        background-color:green;
      }
      .child {
           width:10px;
           height:10px;
           background-color:red;
      }

</style>

Answer 1

Try grabing the children of of what you have

   <script>
    $(".parent").hover(function() {
        $(this).children().animate({
            top: '-10px'
            }, 500);
        }, 
        function() {
            $(this).stop(true,true).animate({ top: "10px" }, 500);
        });
   </script>