且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

添加动画以补偿

更新时间:2023-12-05 16:41:16

要制作div.object的动画,需要将其位置设置为absolute.并根据您对div.objectbutton的要求,在以下代码段中检查更新的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>