2 sinat 34454900 sinat_34454900 于 2016.04.25 17:26 提问

jQuery控制div交换位置

div的id已知,想让两个div互换位置,并且具有动画效果,希望能给出解决方法,最好能有简易代码,多谢

4个回答

showbo
showbo   Ds   Rxr 2016.04.25 17:49
已采纳
 <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>
sinat_34454900
sinat_34454900 多谢了,比较急
一年多之前 回复
sinat_34454900
sinat_34454900 该怎么给swap传参?
一年多之前 回复
sinat_34454900
sinat_34454900 我把块元素存在一个数组里了(因为太多),我又该怎么办?麻烦您了
一年多之前 回复
CSDNXIAOD
CSDNXIAOD   2016.04.25 17:32

Jquery控制DIV
jquery 控制 div的登录界面
jQuery-UI 拖动Div交换位置
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

MCtime
MCtime   2016.04.25 17:43

http://bbs.csdn.net/topics/390241292/
参考这个吧,不过就是没有特效的

MCtime
MCtime 回复ringoPan: 没事
一年多之前 回复
sinat_34454900
sinat_34454900 谢谢,这个我看过了,其中方法我也试过了,不好使,麻烦你了
一年多之前 回复
danielinbiti
danielinbiti   Ds   Rxr 2016.04.25 17:45
 <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>

sinat_34454900
sinat_34454900 十分感谢
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!