使子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>