jquery两个div互换_Jquery 动态交换两个div位置并添加Css动画效果

前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置，常见的思路大多是不考虑原始位置，直接采用append或者appendTo方式将两元素进行添加，该法未考虑原始位置，仅会添加为元素的最后一子元素。

今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在)，并添加简单的css效果。

设计思路

判断元素后边是否存在兄弟元素；存在则通过insertBefore方法将另一元素添加至其兄弟元素前，否则则直接采用appendTo方法添加至父元素。

核心代码

1.判断其后边是否存在兄弟元素

1 functionhasBorther(va1){2 if(va1.next()[0]){//兄弟元素

3 return{bor:va1.next()};4 }else{5 return {par:va1.parent()};//父元素

6 }7 }

兄弟元素判断

2.根据兄弟元素存在与否改变元素位置

function removeDiv(app,Div){

if(app.bor){//兄弟元素

Div.insertBefore(app.bor);

}else{

Div.appendTo(app.par);

}

}

3.移动时之前------添加动画

var clearTransform=function(Div,time){

setTimeout(function(){

Div.css({'transform':'inherit','-webkit-transform':'inherit'});

},time)

}

//记录两容器原始高宽

var oldOpt={ax:a.width(),ay:a.height(),bx:b.width(),by:b.height()};

//获取两容器屏幕位置

var a_pos=a.offset();

var b_pos=b.offset();

//获取两容器偏移