Question

我正在尝试为使用HTML的项目制作一个简单的Whack-a-mole游戏。但是我似乎无法使动画正常工作。

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

int[] values = s.Select(c => (int)(c - '0')).ToArray();

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%;
}

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/

Answer 2

我想唯一缺少的是transition类的.mole属性，并且在position:absolute;的3个地方有一个错字。

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%;
                    position:absolute;
                    top: 100%;
                    background-image:url(mole.png);
                    background-size:100%;
                    background-repeat:no-repeat;
                    background-position:0% 3%;
                    transition: 0.1s all linear;
                    }
                .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%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/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>

jQuery动画有问题

2 个答案: