我正在尝试制作一个网页，该网页顶部有选项卡(当前为按钮)，当单击每个选项卡时，它将使用 JQuery 将 div 容器扩展到网页中的特定空间。理想情况下，这应该位于屏幕中间，具体取决于最终 div 容器的大小。
起点应该在选项卡式按钮(同样，当前是一个按钮)的下方，但我无法将其设置为正确设置动画。
如果我使用相对位置，我不能将它设置到一个固定的地方，比如屏幕中间。如果我使用绝对位置，它会从屏幕左上角滚动，而不是从 div 容器的初始位置滚动。
谁能指出我正确的方向？我的完整代码如下(仅作为测试想法的草稿)。
谢谢
$(document).ready(function(){
$("#butbut1").click(function(){
$("#div1").animate({
left: '250px',
top: '-50px',
opacity: '1',
height: '150px',
width: '250px'
});
});
$("#butbut2").click(function(){
$("#div2").animate({
left: '250px',
top: '-50px',
opacity: '1',
height: '150px',
width: '250px'
});
});
}); <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button id="butbut1">Start Animation1</button>
<button id="butbut2">Start Animation2</button>
<p>Text here, blah blah blah blah</p>
<div id="div1" style="background:#98bf21;height:0px;width:0px;position:relative;overflow:hidden;opacity:0.5;">Lots of content in here that is much bigger than the actual box, hopefully it doesn't show at first but then it should show later on.</div>
<div id="div2" style="background:orange;height:0px;width:0px;position:relative;overflow:hidden;opacity:0.5;">Lots of content in here that is much bigger than the actual box, hopefully it doesn't show at first but then it should show later on.</div>
</body>
</html>做了一个 JSFiddle 来展示...
最佳答案
尝试将 animate() 中的 top 值从 -50px 更改为更高的值，例如 100px。
关于JQuery 动画到定义的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39612509/