CODEWITHSUNDEEP
jquery
user123
user123

Reputation: 443

Centering element on animation

I'm working on a simple app that moves a circle inside a selected square, first you have to choose the circle you need to move and choose the square where it should be, moving of element is ok, my problem is, the element is not centered while its doing the animation even after the animation.

Hope you help me.

Thanks.

var selectedCircle = null;

$(".circle").click(function() {
    $(this).addClass('selected').siblings().removeClass('selected').animate({ top: 0, left: 0 });
    selectedCircle = $(this);
});

$(".container .square").click(function() {
  if (selectedCircle) {
    var selectedSquare = $(this);
    selectedSquare.addClass("selected");
    // 2.5 is for centering the circle in the square : width/height of square - width/height of circle / 2
    // => (50 - 45) / 2
    selectedCircle.animate({
      top: selectedSquare.offset().top - selectedCircle.offset().top + 2.5,      
      left: selectedSquare.offset().left - selectedCircle.offset().left + 2.5
    }, 1200);
  }
  selectedCircle = null;
});
.container{
  height: 200px;
  width: 550px;
  background-color: #eee;
  padding: 10px;
  position: relative;
  border: 1px solid #DDD;
}
.round{
  position: absolute;
  bottom: 10px;
}
.square{
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f60;
  position: relative;
}
.square:nth-child(2){
   width: 65px;
}
.square:nth-child(3){
   width: 75px;
}
.square:nth-child(4){
   width: 85px;
}
.square:nth-child(5){
   width: 95px;
}
.square:nth-child(6){
   width: 105px;
}
.square:nth-child(7){
   width: 115px;
}
.square:nth-child(8){
   width: 125px;
}
.square .circle{
    position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.circle{
  cursor: pointer;
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid green;
  border-radius: 100px;
  text-align: center;
  position: relative;
}
.circle span{
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.circle.selected{
  background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="box">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
 <div class="round">
   <div class="circle">
     <span>1</span>
   </div>
   <div class="circle">
     <span>2</span>
   </div>
   <div class="circle">
     <span>3</span>
   </div>
   <div class="circle">
     <span>4</span>
   </div>
  </div>
</div>

Upvotes: 0

Views: 25

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

You have the correct calculation commented in your code: 

width/height of square - width/height of circle / 2

You just need to perform that calculation instead of hard-coding 2.5:

var xOffset = (selectedSquare.width() - selectedCircle.width()) / 2;
var yOffset = (selectedSquare.height() - selectedCircle.height()) / 2;


var selectedCircle = null;

$(".circle").click(function() {
    $(this).addClass('selected').siblings().removeClass('selected').animate({ top: 0, left: 0 });
    selectedCircle = $(this);
});

$(".container .square").click(function() {
  if (selectedCircle) {
    var selectedSquare = $(this);
    selectedSquare.addClass("selected");

    var xOffset = (selectedSquare.width() - selectedCircle.width()) / 2;
    var yOffset = (selectedSquare.height() - selectedCircle.height()) / 2;

    selectedCircle.animate({
      top: selectedSquare.offset().top - selectedCircle.offset().top + yOffset,      
      left: selectedSquare.offset().left - selectedCircle.offset().left + xOffset
    }, 1200);
  }
  selectedCircle = null;
});
.container{
  height: 200px;
  width: 550px;
  background-color: #eee;
  padding: 10px;
  position: relative;
  border: 1px solid #DDD;
}
.round{
  position: absolute;
  bottom: 10px;
}
.square{
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #f60;
  position: relative;
}
.square:nth-child(2){
   width: 65px;
}
.square:nth-child(3){
   width: 75px;
}
.square:nth-child(4){
   width: 85px;
}
.square:nth-child(5){
   width: 95px;
}
.square:nth-child(6){
   width: 105px;
}
.square:nth-child(7){
   width: 115px;
}
.square:nth-child(8){
   width: 125px;
}
.square .circle{
    position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.circle{
  cursor: pointer;
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid green;
  border-radius: 100px;
  text-align: center;
  position: relative;
}
.circle span{
  width: 10px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.circle.selected{
  background-color: #FFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="box">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
 <div class="round">
   <div class="circle">
     <span>1</span>
   </div>
   <div class="circle">
     <span>2</span>
   </div>
   <div class="circle">
     <span>3</span>
   </div>
   <div class="circle">
     <span>4</span>
   </div>
  </div>
</div>

Upvotes: 1

Related Questions