Question

我是一名初学者，正在尝试从事小型项目的练习。我一直在为我的儿子制作一个小游戏，并且在jQuery .effect()动画方面遇到了一个小问题。单击正确的div时，它具有.effect('bounce')动画，但它正在弄乱页面上div的位置。 Here is the link to the game.我怎样才能阻止这种情况发生？我假设我的CSS中有一个编辑。

对不起，如果我没有快速回复，我会在睡觉之前发布这个（整个晚上尝试解决这个问题），提前谢谢！

＆＃13;

$(document).ready(function() {
    $('.wrong').click(function() {
        $(this).effect('explode');
    });
    
    $('.right').click(function() {
        $(this).effect('bounce', {times:3}, 500);
        $('#level1').delay(700).slideUp('slow');
        $('#level2').delay(710).slideDown('slow');
    });
});

＆＃13;

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-align:center;
    height: 100%;
}

#level1 {
    position: relative;
    background-color: lightgrey;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#level2 {
    height: 100%;
    display: none;
    margin: 0;
    padding: 0;
}

.inner-container {
    position: relative;
    height: 100%;
}

.question {
    text-align: center;
    font-size: 20px;
    padding-top: 5%;
    margin: 0;
}

.circles {
    text-align: center;
    margin-top: 10%;
}

.red {
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: red;
    margin: 0 5%;
}

.blue {
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: blue;
    margin: 0 5%;
}

.green {
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: green;
    margin: 0 5%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <title>Color Game</title>
    </head>
    <body>
        <div id="level1">
            <div class="inner-container">
                <p class="question">Which color is <span style="color: blue">BLUE</span></p>
                <div class="circles">
                    <div class="red wrong"></div>
                    <div class="blue right"></div>
                    <div class="green wrong"></div>
                </div>
            </div>
        </div>
        <div id="level2">
            <div class="inner-container">
                <p class="question">Which color is <span style="color: green">GREEN</span></p>
                <div class="circles">
                    <div class="blue wrong"></div>
                    <div class="red wrong"></div>
                    <div class="green right"></div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

＆＃13;

Answer 1

看起来反弹效果与相对定位和边距不相似。

试试这个CSS：

   html {
    height: 100%;
    width: 100%
}

body {
    margin: 0;
    padding: 0;
    text-align:center;
    height: 100%;
    width: 100%;
}

#level1 {
    position: absolute;
    background-color: lightgrey;
    height: 100%;
    margin: 0;
    padding: 0;  
    width: 100%;  
}

#level2 {
    position: absolute;
    height: 100%;
    display: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.inner-container {
    position: absolute;
    height: 100%;
    width: 100%;
    border: thin black solid;
}

.question {
    text-align: center;
    font-size: 20px;
    padding-top: 5%;
    margin: 0;
}

.circles {
    text-align: center;
}

.red {
    position: absolute;
    top: 300px;
    left: 30%;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: red;
}

.blue {
    position: absolute;
    top: 300px;
    left: 45%;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: blue;
}

.green {
    position: absolute;
    top: 300px;
    left: 60%;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: green;
}

我在本地运行它看起来很有效。

编辑：您可能想要关闭边框。我只是打开它们，这样我才能看到球所在的容器。

jQuery .effect（）搞乱了网页风格

1 个答案: