JQuery Easing Isting Working, Callback и длительность работают, но не ослабляются.РЕДАКТИРОВАТЬ: я перестал работать над этим проектом - PullRequest
0 голосов
/ 11 декабря 2018

У меня есть эта игра, и я пытаюсь использовать замедление: линейное.Я ищу его и использую правильный синтаксис (я полагаю), но он продолжает колебаться, что не должно быть значением по умолчанию для замедления.Вот мой код: Если я допустил глупую ошибку, такую ​​как неправильное написание слова "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

...