javascript - 使用动画效果定位元素（jQuery UI）

Question

我想相对于另一个元素（elemB）定位一个元素（elemA）。所以我为此使用了 jQuery ui 位置实用程序，如下所示：

 $(elemA).position({my:'right top', at:'left top', of:elemB});

但我希望通过动画效果来完成定位。

我如何使用.animate()来完成我的任务？

你可以在这个fiddle中看到我到目前为止所做的事情。我希望 elemA 使用 jQuery 和 jQuery ui 滑动到具有动画效果的新位置。

Answer 1

像这样？？

<div>
    <div id="elemA"><button id="btn">click</button></div>

    <div id="elemB"></div>
</div>

$('#btn').click(function(){  
  var position = $('#elemB').offset().left-100; 
  $("#elemA").animate({'left':position},'slow');  

});​

演示

还要检查css，我也编辑过它。

Answer 2

您可以使用该方法的using选项回调position()来为被定位的元素设置动画。

指定后，实际的属性设置将委托给此回调。接收两个参数：第一个是应该设置的位置的 top 和 left 值的哈希值，可以转发到.css()or .animate()。

（我添加的链接）

---

所以你的代码将是：

$('#btn').click(function() {
  $('#elemA').position({
    my: 'right top',
    at: 'left top',
    of: $('#elemB'),
    using: function(pos) {
      $(this).animate(pos, "slow")
    }
  });

});

#elemA {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
#elemB {
  width: 100px;
  height: 100px;
  background: green;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>
  <div id="elemA">
    <button id="btn">click</button>
  </div>
  <div id="elemB"></div>
</div>