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

好的，我正在做一个电梯模拟器。一切的商业逻辑都很好，我使用的是队列。我遇到的问题是将电梯从队列中的一层移动到下一层。我使用的是HTML、CSS和JavaScript/Jquery。到目前为止，我一直在尝试的两种方法是Jquery的动画方法和CSS翻译。我还没有找到一个像样的答案。我最近的一次尝试是在DOM中使用不可见元素，以便获得移动电梯的坐标。我将提供代码片段以作进一步解释

这是一个网页的图片，你可以看到我需要能够在任何给定的时间将电梯移动到任何给定的楼层

//当用户选择开始按钮时调用
$（“#btn开始”）。单击（函数（）{
//开始模拟
让目的地=$（“#二楼”）.offset（）；
$（“#电梯”）.animate（{right:destination.left，bottom:destination.top}，4000，“linear”，function（）{console.log（“电梯完成移动”）}）；
//});
});
。电梯可视化{
宽度：55%；
}
.电梯{
位置：相对位置；
最大宽度：10vw；
左边距：6vw；
}
.地板{
位置：相对位置；
}
.隐藏目的地{
位置：绝对位置；
底部：10vw；
左：11vw；
背景：无；
高度：5px；
宽度：5px；
}
1.铺地{
宽度：75%；
利润底部：15vw；
}
#一楼，
#二楼{
页边距底部：0；
}
.楼层名称{
保证金：0；
填充：0；
文本对齐：右对齐；
颜色：#777；
保证金权利：6vw；
}
#四楼标签{
利润率最高：15vw；
}
.btn开始{
位置：静态；
边界：无；
填充：8px21px；
垂直对齐：中间对齐；
文本对齐：居中；
光标：指针；
边界半径：5%；
字体大小：24px；
背景色：#b77110；
颜色：白色；
左边距：15px；
边缘顶部：10px；
}

第四层


第三层


第二层


第一层


开始
像这样的东西

只需将底部设置为动画，使其移动到您想要的位置即可

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

我从要设置动画的元素获取偏移量（仅为顶部值）。然后我设置电梯的最高值，使之与目的地的最高值相匹配


//当用户选择开始按钮时调用
$（“#btn开始”）。单击（函数（）{
//开始模拟
让destination=$（“#二楼”）.offset（）.top；
$（“#电梯”）。动画（{top:destination}，200，“线性”）；
//});
});
$（'.btn to floor'）。在（'click'，function（）上{
let floor=$（this.data（'floor'）；
设楼层=$（'.floor'）。长度；
//eq（floors-floor）需要进行一些神奇的计算（您也可以根据数据属性在这里使用一些硬编码的id）。
让destination=$（'.floor'）.eq（floors-floor）.find（'.floor-bound'）.eq（0）.offset（）.top；
$（“#电梯”）。动画（{top:destination}，200，“线性”）；
})；
。电梯可视化{
宽度：55%；
位置：相对位置；
}
.电梯{
位置：绝对位置；
左边距：6vw；
底部：0；
}
.地板{
高度：180px；/*电梯高度+文字+线条*/
}
1.铺地{
宽度：75%；
}
.楼层名称{
保证金：0；
填充：0；
文本对齐：右对齐；
颜色：#777；
保证金权利：6vw；
}
.btn开始{
位置：静态；
边界：无；
填充：8px21px；
垂直对齐：中间对齐；
文本对齐：居中；
光标：指针；
边界半径：5%；
字体大小：24px；
背景色：#b77110；
颜色：白色；
左边距：15px；
边缘顶部：10px；
}

第四层


第三层


第二层


第一层


开始
1.
2.
3.
4
使用css的转换和次要javascript，您可以通过按钮onclick的内联javascript调用，将对象（无论是img还是其他什么，我在演示中使用了基于文本的span）动画化到页面的一部分-我在本文底部为您编写了一个快速而肮脏的演示

有关css转换的更多信息：

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


.lift{
位置：绝对位置；
变换：旋转（90度）；
底部：10%；
左：30%；
过渡时间：2s；
}
弗尔福先生{
位置：绝对位置；
底部：85%；
左：5%；
}
弗雷特先生{
位置：绝对位置；
底部：60%；
左：5%；
}
弗尔托先生{
位置：绝对位置；
底部：35%；
左：5%；
}
弗隆先生{
位置：绝对位置；
底部：10%；
左：5%；
}
.按钮{
位置：绝对位置；
底部：5px；
左：50%；
}
4楼
三楼
二楼
一楼
举起
1234
不要以图片形式发布代码，请将我们需要的代码复制粘贴到您的问题中。我从您的代码中创建了一个片段。不幸的是，由于您没有向我们提供所有代码，因此它无法正常工作。请相应地更新，以便我们可以看到您的问题所在。问题是我不知道将电梯向上移动的好方法参观每一层楼。我想更改代码片段以显示电梯向上移动到s