添加动画以补偿 [英] add animation to offset

问题描述

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

I'm working on a simple app that move an element to a specific position. I succeed to move the element, but I want to add animation, while it is being move. I tried to use animate instead of offset but doesn't work.

希望你能帮助我.

谢谢.

$('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>

推荐答案

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

To animate the div.object, need to set its position as absolute. And also check the updated CSS in following code snippets as per your requirement for div.object and 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;
}

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

这篇关于添加动画以补偿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！