Add animation in element

Question

I'm working on a simple app, that transfers an element inside an element. So I have 2 set of shapes, square and circle. First I have to choose a circle and then a square, the moment I click on a square, the circle that I chose will be move inside the square. the code is working fine, its just, I have to add animation like the circle is moving inside the square I choose.

Hope you understand me.

Thanks

CODEPEN

$('.circle').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $(this);

  $('.container .square').click(function() {
    $(this).addClass('selected');
    $(this).html(selected);
  });
});

.container {
  height: 230px;
  width: 110px;
  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 .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;
}

Douwe de Haan · Accepted Answer

I think your looking for something like the snippet below.

The problem is that you don't know where your circle is and to what square it must go. The $selected.offset() is the position of the element on the screen and with the position: fixed it places the circle on the screen at the same position it was on.

Then the animation makes sure to animate the circle from it's new position, to the position of the square on the screen (hence the $this.offset, which is the position of the square).

var $body = $('body'),
    $selected;

$('.round .circle').click(function(){
  $(this).addClass('selected').siblings().removeClass('selected');
  $selected = $(this);
});

$('.container .square').click(function(){
  if ($selected) {
    var $this = $(this);
    $selected.css({
      top: $selected.offset().top,
      left: $selected.offset().left,
      position: 'absolute'
    }).appendTo($body).animate({
      top: $this.offset().top + 2,
      left: $this.offset().left + 2
    }, 1000, function() {
      $(this).css({
        position: 'absolute',
        top: 'auto',
        left: 'auto',
      }).appendTo($this);
    });
    
    $this.addClass('selected');
  }
  
  $selected = undefined;
});

.container{
  height: 300px;
  width: 110px;
  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 .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;
}

Some thoughts:

After ending the animation, you could add the element to the square again and remove the temporary styling (the top, left and position). But I think you're able to do that :)

Add animation in element

Answers (2)

Related Questions