<分区>
标签 javascript jquery html css
<分区>
我有两个元素和一个按钮。单击按钮时，我试图使第一个元素完全位于另一个元素之上。
$("#clickme").click(function(){
$("#frist_element").appendTo("#second_element")
})div{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
}
#second_element{
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>
<button id="clickme">Click Me</button>单击按钮时，红色圆圈应移动(动画移动)到黄色圆圈，绿色圆圈不可见
更新: 这是一个 gif，它准确地显示了我在寻找什么 gif
最佳答案
完成，我只是添加了相对于第一个 div 的位置，并占据了第二个的顶部位置，并使用 animation 添加到第一个 div功能。之后第一个转到第二个 div。
$("#clickme").click(function(){
var secondDivPosition=$("#second_element").position();
var firstDivPosition=$("#first_element").position();
var topSecond =secondDivPosition.top.toString()+'px';
var topFirst =firstDivPosition.top.toString()+'px';
if(firstDivPosition.top==secondDivPosition.top)
{
$("#first_element").animate({"top":"0px"},300, function() {});
$("#second_element").css({"visibility":"initial"});
}else
{
$("#first_element").animate({"top":topSecond},300, function() {
$("#second_element").css({"visibility":"hidden"});
});
}
});div{
background-color: red;
width: 30px;
height:30px;
margin: 20px;
border-radius: 50%;
}
#first_element{
position: relative;
}
#second_element{
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first_element"></div>
<div id="second_element"></div>
<button id="clickme">Click Me</button>关于javascript - 单击按钮将元素移动到另一个元素之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49987537/