我需要在我的网页中为电梯图像设置动画并将其移动到视图中的预设位置

Question

好的，所以我正在制作电梯模拟器。一切的业务逻辑都很好，我正在使用队列。我遇到的问题是将电梯从队列中的一层移动到下一层。我正在使用 HTML、CSS 和 JavaScript/Jquery。到目前为止，我一直在尝试的两种方法是 Jquery 的动画方法和 CSS 翻译。我还没有找到一个像样的答案。我最近的尝试与在 DOM 中使用不可见元素有关，以便获得将电梯移动到的坐标。我将提供代码片段以进行进一步解释。那是网页的图片，如您所见，我需要能够在任何给定时间将电梯移动到任何给定楼层。// Called when user selects the Start button$('#btn-start').click(function() {  // Start the Simulation  let destination = $('#second-floor').offset();        $("#elevator").animate( {right: destination.left, bottom: destination.top}, 4000, "linear", function(){console.log("Elevator finished moving")} );  //});});.elevator-visual {  width: 55%;}.elevator {  position: relative;  max-width: 10vw;  margin-left: 6vw;}.floor {  position: relative;}.hidden-destination {  position: absolute;  bottom: 10vw;  left: 11vw;  background: none;  height: 5px;  width: 5px;}.floor-bound {  width: 75%;  margin-bottom: 15vw;}#first-floor,#second-floor {  margin-bottom: 0;}.floor-title {  margin: 0;  padding: 0;  text-align: right;  color: #777;  margin-right: 6vw;}#floor-four-lable {  margin-top: 15vw;}.btn-start{    position: static;    border: none;    padding: 8px 21px;    vertical-align: middle;    text-align: center;    cursor: pointer;    border-radius: 5%;    font-size: 24px;    background-color: #b77110;    color: white;    margin-left: 15px;    margin-top: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Elevator Diagram --><div class="elevator-visual">  <div class="floor">    <div class="hidden-destination"></div>    <p id="floor-four-lable" class="floor-title">Floor 4</p>    <hr id="forth-floor" class="floor-bound" />  </div>  <div class="floor">    <div class="hidden-destination"></div>    <p class="floor-title">Floor 3</p>    <hr id="third-floor" class="floor-bound" />  </div>  <div class="floor">    <div class="hidden-destination"></div>    <p class="floor-title">Floor 2</p>    <hr id="second-floor" class="floor-bound" />  </div></div>

Answer 1

像这样的东西？

只需将底部动画到您想要它去的任何地方。

我在这里使用固定的 px 值作为高度，以便更容易理解正在发生的事情（至少我希望它更容易）

我从要为其设置动画的元素中获取偏移量（只是最大值）。然后我将电梯的最高值设置为与目的地的最高值相匹配。

// Called when user selects the Start button

$('#btn-start').click(function() {

  // Start the Simulation

  let destination = $('#second-floor').offset().top;

        $("#elevator").animate( {top: destination}, 200, "linear" );

  //});

});

$('.btn-to-floor').on('click', function() {

  let floor = $(this).data('floor');

  let floors = $('.floor').length;

  // eq(floors - floor) needed to so some magic calculations (you could also just use some hardcoded id here based on data attribute. 

  let destination = $('.floor').eq(floors - floor ).find('.floor-bound').eq(0).offset().top;

        $("#elevator").animate( {top: destination}, 200, "linear");

});

.elevator-visual {

  width: 55%;

  position: relative;

}

.elevator {

  position: absolute;

  margin-left: 6vw;

  bottom: 0;

}

.floor {

  height: 180px; /* height of elevator + text + line */

}

.floor-bound {

  width: 75%;

}

.floor-title {

  margin: 0;

  padding: 0;

  text-align: right;

  color: #777;

  margin-right: 6vw;

}

.btn-start{

    position: static;

    border: none;

    padding: 8px 21px;

    vertical-align: middle;

    text-align: center;

    cursor: pointer;

    border-radius: 5%;

    font-size: 24px;

    background-color: #b77110;

    color: white;

    margin-left: 15px;

    margin-top: 10px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Elevator Diagram -->

<div class="elevator-visual">

  <div class="floor">

    <p id="floor-four-lable" class="floor-title">Floor 4</p>

    <hr id="forth-floor" class="floor-bound" />

  </div>

  <div class="floor">

    <p class="floor-title">Floor 3</p>

    <hr id="third-floor" class="floor-bound" />

  </div>

  <div class="floor">

    <p class="floor-title">Floor 2</p>

    <hr id="second-floor" class="floor-bound" />

  </div>

  <div class="floor">

    <p class="floor-title">Floor 1</p>

    <hr id="first-floor" class="floor-bound" />

  </div>

  <img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />

</div>

<button id="btn-start" class="btn-start">Start</button>

<button class="btn-to-floor" data-floor="1">1</button>

<button class="btn-to-floor" data-floor="2">2</button>

<button class="btn-to-floor" data-floor="3">3</button>

<button class="btn-to-floor" data-floor="4">4</button>

Answer 2

使用 css 的过渡和次要 javascript，您可以通过按钮的 onclick 的内联 javascript 调用将您的对象（无论是 img 还是其他，我在演示中使用基于文本的 span）动画到页面的一部分 - 我在这篇文章的底部为你写了一个快速而肮脏的演示。

有关 css 过渡的更多信息：https ://www.w3schools.com/css/css3_transitions.asp

注意：我没有包含您的队列列表机制，因为这不是您的问题的一部分......但是将我的示例实施到您的项目中应该不会太难 - 祝你好运。

.lift {

  position: absolute;

  transform: rotate(90deg);

  bottom: 10%;

  left: 30%;

  transition-duration: 2s;

}

.flrfour {

  position: absolute;

  bottom: 85%;

  left: 5%;

}

.flrthree {

  position: absolute;

  bottom: 60%;

  left: 5%;

}

.flrtwo {

  position: absolute;

  bottom: 35%;

  left: 5%;

}

.flrone {

  position: absolute;

  bottom: 10%;

  left: 5%;

}

.buttons {

  position: absolute;

  bottom: 5px;

  left: 50%;

}

<span class="flrfour"> floor 4 </span>

<span class="flrthree"> floor 3 </span>

<span class="flrtwo"> floor 2 </span>

<span class="flrone"> floor 1 </span>

<span id="lft" class="lift">lift</span>

<div class="buttons"><button onclick="document.getElementById('lft').style.bottom = '10%';">1</button><button onclick="document.getElementById('lft').style.bottom = '35%';">2</button><button onclick="document.getElementById('lft').style.bottom = '60%';">3</button><button

    onclick="document.getElementById('lft').style.bottom = '85%';">4</button>

</div>