Question

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

Answer 1

尝试抓住你拥有的孩子

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

在父div的悬停上使子div动画

1 个答案: