Jquery 动态交换两个div位置并添加Css动画效果
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置，常见的思路大多是不考虑原始位置，直接采用append或者appendTo方式将两元素进行添加，该法未考虑原始位置，仅会添加为元素的最后一子元素。
今天将给大家介绍一种位置交换方式（判断兄弟元素是否存在），并添加简单的css效果。
设计思路
判断元素后边是否存在兄弟元素；存在则通过insertBefore方法将另一元素添加至其兄弟元素前，否则则直接采用appendTo方法添加至父元素。
核心代码
1.判断其后边是否存在兄弟元素
function hasBorther(va1){
if(va1.next()[0]){//兄弟元素
return {bor:va1.next()};
}else{
return {par:va1.parent()};//父元素
}
}
兄弟元素判断
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();
//获取两容器偏移值
var offset_x=a_pos.left-b_pos.left;
var offset_y=a_pos.top-b_pos.top;
//第一个花括号里面是动画内容，可以为空，但不能省去中括号
a.animate({},function(){
var offset_x_=-offset_x; //偏移值取反
var offset_y_=-offset_y;
var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';
a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(a,0);
})
b.animate({},function(){
var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';
b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(b,0);
})
效果图
说明：更改下拉框可完成两容器位置的交换，目前版本加入部分css动画，效果不是十分完美，欢迎大佬指导。
源码
说明：引入jquery库即可。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>
Document
</title>
</meta>
</head> <body>
<script src="jquery-1.11.3.min.js" type="text/javascript">
</script>
<style>
.my-container {
margin: auto 0;
padding: 10px;
} .my-container>div:first-child {
background: #c0cbff;
margin: auto 0;
padding: 10px;
height: 130px;
} .my-container>div:last-child {
background: pink;
margin: 10px 0;
padding: 10px;
height: 130px;
} .my-container>div>div {
width: 100px;
height: 100px;
margin: 5px 10px;
padding: 10px;
float: left;
/* 过渡时间 */
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
} .my-container>div:first-child>div {
background: #ccc;
} .my-container>div:last-child>div {
background: #fff;
}
</style>
<div class="my-container">
<div class="div1">
<div id="A">子容器A</div>
<div id="B">子容器B</div>
</div>
<div class="div2">
<div id="C">子容器C</div>
<div id="D">子容器D</div>
</div>
</div>
交换元素：
<select name="" id="select1" class="select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="" id="select2" class="select">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<script>
$(function() {
$('.select').on('change',function(){
var select1=$('#select1');
var select2=$('#select2');
if(select1.val()!=select2.val()){//不同元素 位置交换
var removeDiv1=$('#'+select1.val());
var removeDiv2=$('#'+select2.val());
var appendToObj1=hasBorther(removeDiv1);
var appendToObj2=hasBorther(removeDiv2);
addCartoon(removeDiv1,removeDiv2);//添加动画
//移动两个容器
removeDiv(appendToObj1,removeDiv2);
removeDiv(appendToObj2,removeDiv1); }else{
alert('请选择不同元素交换位置！');
}
}) //判断其后边是否存在兄弟元素
function hasBorther(va1){
if(va1.next()[0]){//兄弟元素
return {bor:va1.next()};
}else{
return {par:va1.parent()};//父元素
}
}
//保证位置正确
function removeDiv(app,Div){
if(app.bor){//兄弟元素
Div.insertBefore(app.bor);
}else{
Div.appendTo(app.par);
} } //移动时之前------添加动画
function addCartoon(a,b){
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();
//获取两容器偏移值
var offset_x=a_pos.left-b_pos.left;
var offset_y=a_pos.top-b_pos.top; //第一个花括号里面是动画内容，可以为空，但不能省去中括号
a.animate({},function(){
var offset_x_=-offset_x; //偏移值取反
var offset_y_=-offset_y;
var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';
a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(a,0);
}) b.animate({},function(){
var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';
b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});
clearTransform(b,0);
})
} })
</script>
</body> </html>
Jquery 动态交换两个div位置并添加Css动画效果的更多相关文章
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图.那么今天就主要写一个完整的demo.展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果.来来来,直接上demo ...
- java交换两个数字位置
第一种:在main输出,通过反射实现 1 public static void main(String[] args) throws Exception { Integer a = 1; Intege ...
- 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画
HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...
- JQuery动态隐藏和显示DIV
<head> <script language="javascript"> function HideWeekMonth() { $("#tt1& ...
- 常见的页面中两个div自适应等高CSS控制
第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell; 第一种利用dispaly:flex,父级div设置dispaly: ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
- js动态创建style节点(js文件中添加css)
ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 --------------------- 有很多提供动态创建 ...
- DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...
- 面试题：如何在不使用临时变量temp的情况下交换两个整数的值？
利用一个小技巧,一个整数a在异或另一个整数b两次以后所得的值还是整数a. 具体的过程我们可以自己找两个整数以二进制的形式自己在纸上画一下他们的异或过程.(异或的运算符号为"^") ...
随机推荐
- python接口自动化测试 - requests库的post请求进行文件下载
前言 之前讲了文件上传,当然就有文件下载啦 文件下载操作步骤 极其简单,将二进制格式的响应内容存进本地文件中,根据需要下载的文件的格式来写文件名即可 down_url = 'https://www.i ...
- Eugeny and Array（思维）
Eugeny has array a = a1, a2, ..., an, consisting of n integers. Each integer ai equals to -1, or to ...
- 普及C组第一题（8.9）
2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...
- UNICODE编码UTF-16 中的Endian（FE FF） 和 Little Endian（FF FE）
从网上找到的两篇不错的文章,由于被网上多处转载,所以不知道源处,未能注明出处,希望作者见谅,如有意见请发信给我,谢谢! 第一篇很清晰. 介绍Unicode之前,首先要讲解一些基础知识.虽然跟Unico ...
- Python 多任务（进程） day1（1）
进程和程序的关系: 通俗来讲程序是死的不变的,进程是活的改变的.一个程序在没运行之前是程序,运行之后是进程 程序是一种电脑能识别的2进制代码,当你一直运行程序的时候,会出现多个进程(相当于菜谱和菜,照 ...
- 【C语言】用函数实现两个数排序（指针作函数参数）
原理就不讲了,这里用来理解指针的使用方法 #include <stdio.h> void fun(int* a,int* b) { int t; if(*a>=*b) { t = * ...
- P&R 2
Floorplan: 要做好floorplan需要掌握哪些知识跟技能? 通常,遇到floorplan问题,大致的debug步骤跟方法有哪些? 如何衡量floorplan的QA? Floorplan是后 ...
- 连通数[JSOI2010]-洛谷T4306
咕咕咕 tarjan+拓排应该是正解吧 然而我上去就打了个tarjan和dijkstra (由于我抄题解抄多了,代码能力极差,于是我就gg了) 题解中有大佬直接用dfs过了8个点,再吸口氧就AC了 ( ...
- Bug搬运工-CSCvi02106 :Cisco 2800, 3800, 1560 APs: when connected to a Cisco Switch CDP-4-DUPLEX_MISMATCH log is seen
Cisco 2800, 3800, 1560 APs: when connected to a Cisco Switch CDP-4-DUPLEX_MISMATCH log is seen CSCvi ...
- php用户名正则验证
在php中,通过正则表达式对用户名进行格式验证,烦了我好久,终于找到了解决办法,在这里分享给大家. 用户名验证规则:用户名只能由数字.字母.中文汉字及下划线组成,不能包含特殊符号. <?php ...