position absoluteで配置していた要素をposition fixedに変更し、同時にその要素を動かしたいと考えています。
その際に、動きとしては最短距離でまっすぐfixedを指定した位置に移動させたいのですが、一度消えて異なる場所から移動する動きになってしまします。
下記の場合では.circleが移動する要素で、クリックしたら右上に移動させようと思っています。
html
1<div class="wrapper"> 2 <div class="box"> 3 <div class="circle"></div> 4 </div> 5</div>
css
1.wapper { 2 width: 100%; 3 height: 200px; 4 } 5 .box { 6 width: 100px; 7 height: 100px; 8 background: #ccc; 9 position: relative; 10 } 11 .circle { 12 width: 20px; 13 height: 20px; 14 background: #333; 15 border-radius: 50%; 16 position: absolute; 17 top: 50%; 18 left: 50%; 19 -webkit-transition: all 1s ease; 20 transition: all 1s ease; 21 } 22 .circle.move { 23 position: fixed; 24 top: 20px; 25 left: auto; 26 right: 20px; 27 } 28
js
1 2 $(".circle").click( 3 function () { 4 $(this).addClass("move"); 5 } 6 );
スムーズにいくやり方があればご教示いただきたいです。
何卒よろしくお願いいたします。