尝试使用 .animate 使图像移动

Question

我正在尝试让图片在页面自行加载时移动我的主要目标是让图像朝我想要的方向移动，这样我就可以添加墙壁并使其在页面加载后立即移动和转动这是我的代码：

<body>
  <div class="container">
<img src="" class="maze" />
<img src="" class="player" />
</div>

body {
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; }

.container {
 position: relative; }

.player {
position: absolute;
height: 5vh;
width: 5vh;
left: 40px;
top: 30px; }

///// JavaScript/Jquery

$(document).ready(function() {


  $( ".player" ).animate({ "down": "-=50px" }, "slow" );
  $( ".player" ).animate({ "left": "-=80px" }, "slow" );
  $( ".player" ).animate({ "down": "-=50px" }, "slow" );
  $( ".player" ).animate({ "right": "-=30px" }, "slow" );
  $( ".player" ).animate({ "down": "-=50px" }, "slow" );

});

Answer 1

您的（更新的）代码的问题是您试图通过设置 "down" 属性的动画来使其移动，但没有这样的属性。要使元素向下移动，请添加到其现有的 "top" 属性。要使元素向上移动，请从其 "top" 属性.

中减去

此外，要使元素向右移动，请将其添加到其 "left" 属性，不要从其 "right" 中减去，因为您已经设置了初始 "left" 但不是 "right".

换句话说，通过指定左上角设置初始位置后，您将通过修改顶部 and/or 左侧来更改位置。

$(document).ready(function() {
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
  $( ".player" ).animate({ "left": "-=80px" }, "slow" );
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
  $( ".player" ).animate({ "left": "+=30px" }, "slow" );
  $( ".player" ).animate({ "top": "+=50px" }, "slow" );
});

img { border: thin black solid; } /* border added to make demo element visible */

.container { position: relative; left: 100px; }

.player {
  position: absolute;
  height: 5vh;
  width: 5vh;
  left: 40px;
  top: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<img src="" class="maze" />
<img src="" class="player" />
</div>

尝试使用 .animate 使图像移动

trying to make image move using .animate

javascript

jquery

jquery-animate