jquery - 在元素中添加动画

Question

我正在开发一个简单的应用程序，它在元素内部传输元素。所以我有两组形状，方形和圆形。首先我必须选择一个圆形，然后选择一个正方形，当我点击一个正方形时，我选择的圆形将移动到该正方形内。代码工作正常，只是，我必须添加动画，就像圆圈在我选择的正方形内移动一样。

希望你能理解我。

谢谢

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;
}

<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>
  <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>

Answer 1

我认为您正在寻找类似下面的代码片段的内容。

问题是你不知道你的圆在哪里以及它必须去哪个正方形。 $selected.offset() 是元素在屏幕上的位置，使用 position:fixed 可以将圆圈放置在屏幕上与原来相同的位置.

然后，动画确保将圆从新位置动画到屏幕上正方形的位置(因此 $this.offset，即正方形的位置)。

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;
}

<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>
 <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>

一些想法:

动画结束后，您可以再次将元素添加到正方形并删除临时样式(顶部、左侧和位置)。但我认为你能够做到这一点:)