Question

好吧我正在制作Rock Paper Scissors游戏。所以我把摇滚纸和剪刀放在inline-block中并且居中。当其中一个被选中时，我希望其他两个降低并消失。这是它的样子：

＆＃13;

$(function() {
    $("#playerRock").click(function() {
        $("#playerPaper").animate({
            opacity: 0,
            top: "+=20"
        }, 800);
        setTimeout(function() {
            $("#playerPaper").css("display", "none");
        }, 805);
    });
});

＆＃13;

body {
    background: #EDEDED;
}
#mainTitle {
    font-family: 'Muli', sans-serif;
    font-size: 54px;
}
.lowerTitle {
    font-family: 'Muli', sans-serif;
    font-size: 32px;
}
.scoreTitle {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    display: inline-block;
}
#scoreTitle2 {
    margin-right: 20px;
    margin-left: 20px;
}
.scoreBox {
    margin-top: 10px;
    border: 2px solid #AAAAAA;
    width: 50px;
    height: 20px;
}
.scoreBox:focus {
    outline: none;
    font-family: 'Muli', sans-serif;
    text-align: center;
}
.image {
    height: 75px;
    width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
    display: inline-block;
    background: #878787;
    padding: 20px;
    border-radius: 50%;
    border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
    cursor: pointer;
    background: #878787;
    padding: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #095BB3;
    top: 0px;
}
#computerPaper, #playerPaper {
    margin-right: 30px;
    margin-left: 30px;
}
hr {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 4px;
    background: #5E5E5E;
    border: none;
    width: 90%;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <center><div id = "mainTitle">Please make a selection</div></center><br><br>
        <center>
            <div class = "scoreTitle">You</div>
            <div class = "scoreTitle" id = "scoreTitle2">Tie</div>
            <div class = "scoreTitle">Cpu</div>
        </center>
        <center>
            <input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
            <input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
            <input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
        </center><br><br><br>
        <center><div class = "lowerTitle">Computer</div></center><br><br>
        <center>
            <div id = "computerRock">
                <img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
            </div>
            <div id = "computerPaper">
                <img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
            </div>
            <div id = "computerScissors">
                <img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
            </div>
        </center>
        <center><hr></center>
        <center>
            <div id = "playerRock">
                <img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
            </div>
            <div id = "playerPaper">
                <img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
            </div>
            <div id = "playerScissors">
                <img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
            </div>
        </center>
        <br><br><center><div class = "lowerTitle">Player</div></center>
    </body>
</html>

＆＃13;

现在我已经拥有了它，所以如果你点击摇滚div，它就可以为论文div添加动画效果。但是，它不会为top: "+=20"部分设置动画。

所以我想我应该尝试使用marginTop（或CSS中的margin-top）。然而，这降低了所有三个。当你从display: inline-block改变它时，它们看起来很糟糕。

我如何保持这些看起来像这样并且对齐并仍然降低其中一个？

Answer 1

您需要将this.setState({data: result.data.toString('base64')});添加到3个玩家div。

vertical-align: top

$(function() {
    $("#playerRock").click(function() {
        $("#playerPaper").animate({
            opacity: 0,
            'margin-top': "+=20"
        }, 800);
        setTimeout(function() {
            $("#playerPaper").css("display", "none");
        }, 805);
    });
});

body {
    background: #EDEDED;
}
#mainTitle {
    font-family: 'Muli', sans-serif;
    font-size: 54px;
}
.lowerTitle {
    font-family: 'Muli', sans-serif;
    font-size: 32px;
}
.scoreTitle {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    display: inline-block;
}
#scoreTitle2 {
    margin-right: 20px;
    margin-left: 20px;
}
.scoreBox {
    margin-top: 10px;
    border: 2px solid #AAAAAA;
    width: 50px;
    height: 20px;
}
.scoreBox:focus {
    outline: none;
    font-family: 'Muli', sans-serif;
    text-align: center;
}
.image {
    height: 75px;
    width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
    display: inline-block;
    background: #878787;
    padding: 20px;
    border-radius: 50%;
    border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
    cursor: pointer;
    background: #878787;
    padding: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #095BB3;
    top: 0px;
    vertical-align: top;
}
#computerPaper, #playerPaper {
    margin-right: 30px;
    margin-left: 30px;
}
hr {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 4px;
    background: #5E5E5E;
    border: none;
    width: 90%;
}

center {
  vertical-align: top;
}

一个内联块元素不会降低

1 个答案: