javascript - jQuery 动画有问题

Question

我正在尝试为一个使用 HTML 的元素制作一个简单的打地鼠游戏。但是我似乎无法让动画工作。

我正在尝试让三个痣从页面底部滑到顶部，而我正在观看的视频有点糟糕。谁能帮我解决这个问题？

jQuery(document).ready(function() {
  jQuery(".mole").animate({
    "top": "0%"
  }, 5000);
});

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mole {
  background-color: rgb(185, 122, 87);
  border-radius: 100px 100px 0px 0px;
  height: 100%;
  width: 10%;
  postion: absolute;
  top: 100%;
  background-image: url(mole.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0% 3%;
}

.left_ear {
  background-color: rgb(185, 122, 87);
  border-radius: 100px;
  postion: absolute;
  left: 0px;
  float: left;
  min-width: 30%;
  padding-top: 30%;
  z-index: -1;
}

.right_ear {
  background-color: rgb(185, 122, 87);
  border-radius: 100px;
  postion: absolute;
  left: 0px;
  float: right;
  min-width: 30%;
  padding-top: 30%;
  left: 70%;
  z-index: -1;
}

#mole1 {
  left: 10%;
}

#mole2 {
  left: 45%;
}

#mole3 {
  left: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="mole" id="mole1">
  <div class="left_ear"></div>
  <div class="right_ear"></div>
</div>
<div class="mole" id="mole2">
  <div class="left_ear"></div>
  <div class="right_ear"></div>
</div>
<div class="mole" id="mole3">
  <div class="left_ear"></div>
  <div class="right_ear"></div>
</div>

Answer 1

只要拼写正确，它就可以工作:

            body{ width:100%; height:100%; overflow:hidden; }
            .mole{ 
                background-color:rgb(185,122,87);
                border-radius:100px 100px 0px 0px;
                height:100%;
                width:10%;
                position: absolute;
                top: 100%;
                background-image:url(mole.png);
                background-size:100%;
                background-repeat:no-repeat;
                background-position:0% 3%;
                }
            .left_ear{
                background-color:rgb(185,122,87);
                border-radius:100px;
                position:absolute;
                left: 0px;
                float:left;
                min-width: 30%;
                padding-top: 30%;
                z-index:-1;
                }
            .right_ear{
                background-color:rgb(185,122,87);
                border-radius:100px;
                position:absolute;
                left:0px;
                float:right;
                min-width: 30%;
                padding-top: 30%;
                left:70%;
                z-index:-1;
                }
            #mole1 {left: 10%;}
            #mole2 {left: 45%;}
            #mole3 {left: 80%;}

https://jsfiddle.net/wwWaldi/vzj8co25/25/