如何将一个 div 动画设置到与另一个 div 相同的位置。
我想将 #div1 的左侧位置设置为 #div2 的左侧位置的动画
当我使用 .position().left 或 .offset().left 获取 #div2 的左侧位置，然后尝试将 #div1 设置为相同位置时，动画会运行，但会将 #div1 移动到相同位置作为 #div 2 PLUS #div1 的原始位置(即它们未对齐)。
这是该脚本的简化版本。希望你能帮忙:)
<script>
$(function({
var end = $(#div2).position().left;
$(#div1).animate({"left": end.left}, "slow");
});
</script>
<html>
<div id="div1"></div>
<div id="div2"></div>
</html>
最佳答案
好吧，我猜你已经在那里了。但是...代码取决于您的实际布局。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body, td, input, button{
font-family: Tahoma,Verdana,Helvetica,Arial,sans-serif !important;
font-size:11px;
}
label{
width:100px;
display: inline-blocK;
}
#div1{
width:100px;
height:50px;
background-color:red;
position:absolute;
top:100px;
left:30px;
}
#div2{
width:80px;
height:30px;
background-color:green;
position:absolute;
top:200px;
left:100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#moveitButton").click(function() {
doit();
})
});
function doit() {
var div2Pos = $("#div2").position();
var div2Width = $("#div2").css("width");
var div2Height = $("#div2").css("height");
$("#div1").animate({left:div2Pos.left, width:div2Width, height:div2Height}, 1000);
}
</script>
</head>
<body>
<div id="div1">div #1</div>
<div id="div2">div #2</div>
<button id="moveitButton">move it!</button>
</body>
</html>
(至少这在我的浏览器中有效)
kr、扎拉
关于Jquery将div动画到与另一个div相同的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4376268/