讓父div div懸停的子div div動畫

Question

我試圖讓子div在其父容器div的懸停上動畫。但目前我只能讓整個div移動，而且他們都移動到每個div。這裏是我的代碼，如果有人可以幫助我得到正在被徘徊的動畫的父div的子div，那將是非常棒的。

<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

嘗試掠的孩子，你有什麼

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