Question

我正在开发一个简单的应用程序，它将元素移动到特定位置。我成功移动了元素，但是我想在移动元素时添加动画。我尝试使用动画代替偏移，但不起作用。

希望你能帮助我。

谢谢。

$('button').click(function(){
   var offset = $('.target').offset();
   var object = $('.object');
  
    object.offset({top: offset.top, left: offset.left});
});

.container{
  width: 120px;
  height: 150px;
  text-align: center;
}

.target{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #DDD;
  margin-bottom: 100px;
}

.object{
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background-color: brown;
}
button{
  margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="target"></div>
  <div class="object"></div>
  <button>MOVE</button>
</div>

Answer 1

您需要将$（'。object'）的位置设置为绝对位置。您既可以在jquery中进行设置，也可以像这样使用animate：

$('button').click(function(){
   var offset = $('.target').offset();
  $('.object').css("position","absolute")
  .animate({
  "top":offset.top,
  "left":offset.left
  })
});

或使用CSS设置它（在这种情况下，您将必须设置对象的初始顶部和左侧）。

工作方式：jsFiddle

Answer 2

要制作desc的动画，需要将其位置设置为div.object。并根据您对absolute和div.object的要求，在以下代码段中检查更新的CSS。

代码段：

button

$('button').click(function() {
  var offset = $('.target').offset();
  var object = $('.object');
  object.animate({
    top: offset.top,
    left: offset.left
  });
});

.container {
  width: 120px;
  height: 150px;
  text-align: center;
}

.target {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #DDD;
  margin-bottom: 100px;
}

.object {
  width: 50px;
  height: 50px;
  background-color: brown;
  position: absolute;
  left: 43px;
}

button {
  top: 70px;
  position: relative;
}

添加动画以补偿

2 个答案: