javascript - 一个内联 block 元素没有降低

标签 javascript jquery html css

好吧，我正在制作剪刀石头布游戏。因此，我将石头布和剪刀放在一个内联 block 中并居中。当选择其中之一时，我希望另外两个降低并消失。它看起来像这样:

$(function() {
    $("#playerRock").click(function() {
        $("#playerPaper").animate({
            opacity: 0,
            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;
}
#computerPaper, #playerPaper {
    margin-right: 30px;
    margin-left: 30px;
}
hr {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 4px;
    background: #5E5E5E;
    border: none;
    width: 90%;
}
<!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>

现在我有了它，如果您单击岩石 div，它就会为纸张 div 赋予动画效果。但是，它不会为 top: "+=20" 部分设置动画。

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

我怎样才能让它们看起来像这样并对齐，并且仍然低于其中一个？

最佳答案

您需要将 vertical-align: top 添加到 3 个玩家 div。

$(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;
}
<!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>

关于javascript - 一个内联 block 元素没有降低，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48140207/

上一篇：javascript - 在 react 应用程序中获取文档滚动百分比的最佳方法是什么？

下一篇：javascript - React、获取 API 和过滤数据

相关文章：

javascript - Windows Edge 和打开 blob url

javascript - 如何使用 javascript 防止 chrome 的 flash 音频模式

javascript - AWS 自定义资源无法识别成功或失败信号

HTML5 和短结束标签

javascript - 使用 .val() 从电话号码中取出文字

javascript - Vimeo Froogaloop API 无法识别事件

javascript - 以交互方式将另一个页面加载到 DIV

javascript - 数据库库

php - 允许用户修改链接工具栏(更改顺序、添加、删除)的最佳方法

jquery - MediaWiki:仅获取内容

©2024 IT工具网  联系我们