css 平移到某个位置_怎么实现点击div移动到某个位置，再点击时回到原来的位置...

问题：怎么实现点击div移动到某个位置，再点击时回到原来的位置？哪位好心人可以提示一下怎么更优雅地实现这个效果，感觉我写的方法有点乱。非常感谢！

效果图：

圈圈运动

//css代码

* {

padding: 0;

margin: 0;

}

.wrap {

width: 100%;

height: 1000px;

position: relative;

}

.wrap-box {

width: 50%;

margin: 0 auto;

}

.bg {

width: 40%;

height: 800px;

margin: 20px auto 0 auto;

position: absolute;

z-index: 99;

display: none;

background-color:#CFCFCF;

}

.circular {

position: absolute;

width: 150px;

height: 150px;

background-color: #DEDEDE;

border-radius: 100%;

}

.circular:hover {

background-color: #FF3030;

}

.one {

left: 41%;

top: 7%;

}

.two {

left: 49%;

top: 7%;

}

.three {

left: 37%;

top: 20%;

}

.four {

left: 45%;

top: 20%;

}

.five {

left: 53%;

top: 20%;

}

.six {

left: 41%;

top: 33%;

}

.seven {

left: 49%;

top: 33%;

}

//js代码

$(document).ready(function() {

$(".circular").on("click",function(e) {

$this = $(this);

$(this).animate({

left: '200px',

top: '0'

});

$bg = $(".bg");

$bg.show('slow');

e.stopPropagation();

});

});