问题描述
- jQuery控制div交换位置
-
div的id已知，想让两个div互换位置，并且具有动画效果，希望能给出解决方法，最好能有简易代码，多谢
解决方案
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>#div1,#div2{width:100px;height:100px;border:solid 1px #000;position:absolute;left:100px;top:100px;background:#eee;}#div2{top:300px;left:300px}</style>
<input type="button" onclick="swap()" value="交换" />
<script>
function swap() {
var div1 = $('#div1'), div2 = $('#div2');
var p1 = div1.offset(), p2 = div2.offset();
div1.animate(p2, 1000); div2.animate(p1, 1000);
}
</script>
<div id="div1">div1</div><div id="div2">div2</div>
解决方案二：
Jquery控制DIV
jquery 控制 div的登录界面
jQuery-UI 拖动Div交换位置
解决方案三：
http://bbs.csdn.net/topics/390241292/
参考这个吧，不过就是没有特效的
解决方案四：
<html>
<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style>
div{
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pa").animate({top:'200px'});
$("#pb").animate({top:'100px'});
});
});
</script>
<body>
<button>开始动画</button>
<div id="pa" style="top:100px;background:blue;" >a1</div>
<div id="pb" style="top:200px;background:green;">b1</div>
</body>
</html>
时间： 2024-09-09 07:58:13