html 位置变化添加动画,Jquery 动态交换两个div位置并添加Css动画效果

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

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

设计思路

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

核心代码

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

1 function hasBorther(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();

//获取两容器偏移值

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动画，效果不是十分完美，欢迎大佬指导。

源码

1

2

3

4

5

6

7 Document

8

9

10

11

12

13

14

15

16 .my-container {

17 margin: auto 0;

18 padding: 10px;

19 }

20

21 .my-container>div:first-child {

22 background: #c0cbff;

23 margin: auto 0;

24 padding: 10px;

25 height: 130px;

26 }

27

28

29 .my-container>div:last-child {

30 background: pink;

31 margin: 10px 0;

32 padding: 10px;

33 height: 130px;

34 }

35

36 .my-container>div>div {

37 width: 100px;

38 height: 100px;

39 margin: 5px 10px;

40 padding: 10px;

41 float: left;

42 /* 过渡时间 */

43 transition:width 2s, height 2s, transform 2s;

44 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

45 }

46

47 .my-container>div:first-child>div {

48 background: #ccc;

49 }

50

51 .my-container>div:last-child>div {

52 background: #fff;

53 }

54

55

56

57

子容器A

58

子容器B

59

60

61

子容器C

62

子容器D

63

64

65 交换元素：

66

67 A

68 B

69 C

70 D

71

72

73 A

74 B

75 C

76 D

77

78

79 $(function() {

80 $('.select').on('change',function(){

81 var select1=$('#select1');

82 var select2=$('#select2');

83 if(select1.val()!=select2.val()){//不同元素 位置交换

84 var removeDiv1=$('#'+select1.val());

85 var removeDiv2=$('#'+select2.val());

86 var appendToObj1=hasBorther(removeDiv1);

87 var appendToObj2=hasBorther(removeDiv2);

88 addCartoon(removeDiv1,removeDiv2);//添加动画

89 //移动两个容器

90 removeDiv(appendToObj1,removeDiv2);

91 removeDiv(appendToObj2,removeDiv1);

92

93 }else{

94 alert('请选择不同元素交换位置！');

95 }

96 })

97

98 //判断其后边是否存在兄弟元素

99 function hasBorther(va1){

100 if(va1.next()[0]){//兄弟元素

101 return {bor:va1.next()};

102 }else{

103 return {par:va1.parent()};//父元素

104 }

105 }

106 //保证位置正确

107 function removeDiv(app,Div){

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

109 Div.insertBefore(app.bor);

110 }else{

111 Div.appendTo(app.par);

112 }

113

114 }

115

116 //移动时之前------添加动画

117 function addCartoon(a,b){

118 var clearTransform=function(Div,time){

119 setTimeout(function(){

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

121 },time)

122 }

123 //记录两容器原始高宽

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

125

126 //获取两容器屏幕位置

127 var a_pos=a.offset();

128 var b_pos=b.offset();

129 //获取两容器偏移值

130 var offset_x=a_pos.left-b_pos.left;

131 var offset_y=a_pos.top-b_pos.top;

132

133 //第一个花括号里面是动画内容，可以为空，但不能省去中括号

134 a.animate({},function(){

135 var offset_x_=-offset_x; //偏移值取反

136 var offset_y_=-offset_y;

137 var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';

138 a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});

139 clearTransform(a,0);

140 })

141

142 b.animate({},function(){

143 var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';

144 b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});

145 clearTransform(b,0);

146 })

147 }

148

149 })

150

151

152

153

154

源码

标签：Jquery,function,px,元素,transform,offset,var,div,Css

来源： https://www.cnblogs.com/giserjobs/p/11870050.html