Javascript 使子div在父div悬停时设置动画

我正试图让子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>

小孩
小孩
小孩
$（“.parent”）.hover（函数（）{
$（“this.child”）.animate({
顶部：'-10px'
}, 500);
}, 
函数（）{
$（this.stop（true，true）.animate（{top:“10px”}，500）；
});
.家长{
宽度：100px；
高度：100px
背景颜色：绿色；
}
.孩子{
宽度：10px；
高度：10px；
背景色：红色；
}

试着抓住你的孩子

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

$（“.parent”）.hover（函数（）{
$（this）.children（）.animate({
顶部：'-10px'
}, 500);
}, 
函数（）{
$（this.stop（true，true）.animate（{top:“10px”}，500）；
});