У меня есть эта игра, и я пытаюсь использовать замедление: линейное.Я ищу его и использую правильный синтаксис (я полагаю), но он продолжает колебаться, что не должно быть значением по умолчанию для замедления.Вот мой код: Если я допустил глупую ошибку, такую как неправильное написание слова "linear", обязательно сообщите мне.
$("#buttonUp").click(function() {
$("#player").animate(
{
top: "110",
}, 3000, "linear"
);
});
$("#buttonUp").click(function() {
setTimeout(function() {
$("#player").stop();
}, 500);
});
$("#buttonRight").click(function() {
$("#player").animate(
{
right: "900px",
},
3000,'linear'
);
});
$("#buttonRight").click(function() {
setTimeout(function() {
$("#player").stop();
}, 500);
});
$("#buttonLeft").click(function() {
$("#player").animate(
{
right: "-900px"
},
3000,
"linear"
);
});
$("#buttonLeft").click(function() {
setTimeout(function() {
$("#player").stop();
}, 500);
});
$("#buttonDown").click(function() {
$("#player").animate(
{
top: "585px"
},
3000,
"linear"
);
});
$("#buttonDown").click(function() {
setTimeout(function() {
$("#player").stop();
}, 500);
});
//Ignore From Here Down
$("#start").click(function() {
chooser = Math.floor(Math.random() * 7) + 1;
if (chooser == 1) {
$("#artifact1").animate({
display: "block"
});
} else if (chooser == 2) {
$("#artifact2").animate({
display: "block"
});
} else if (chooser == 3) {
$("#artifact3").animate({
display: "block"
});
} else if (chooser == 4) {
$("#artifact4").animate({
display: "block"
});
} else if (chooser == 5) {
$("#artifact5").animate({
display: "block"
});
} else if (chooser == 6) {
$("#artifact6").animate({
display: "block"
});
} else if (chooser == 7) {
$("#artifact7").animate({
display: "block"
});
}
});
body {
background-color: lightblue
}
#start {
position: relative;
height: 50px;
width: 50px;
background-color: red;
border-radius: 100%;
position: relative;
top: -150px;
left: 125px;
}
#player {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
top: 300px;
}
#buttons {
position: absolute;
top: 40px;
}
#buttonFill {
height: 30px;
width: 30px;
background-color: red;
position: relative;
top: 0px;
left: 50px;
}
#title {
position: relative;
top: -125px;
}
#buttonUp {
height: 30px;
width: 30px;
background-color: purple;
position: relative;
top: -60px;
left: 50px;
}
#buttonRight {
height: 30px;
width: 30px;
background-color: purple;
position: relative;
top: -60px;
left: 20px;
}
#buttonLeft {
height: 30px;
width: 30px;
background-color: purple;
position: relative;
top: -90px;
left: 80px;
}
#buttonDown{
height: 30px;
width: 30px;
background-color: purple;
position: relative;
top: -90px;
left: 50px;
}
#border {
height: 3px;
width: 1890px;
background-color: blue;
position: absolute;
top: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div id="player"></div>
<h1 id="title">Find The Artifacts</h1>
</center>
<div id="buttons">
<div id="buttonFill"></div>
<div id="buttonUp"></div>
<div id="buttonRight"></div>
<div id="buttonLeft"></div>
<div id="buttonDown"></div>
<div id="border"></div>
</div>
<div id="start"><center><h3>Start</h3></center></div>
также я использую codepen, и если вы хотите его увидеть, нажмите эту ссылку, https://codepen.io/Ankizlee/pen/LMYPBE