使用动画效果定位元素(jQuery UI)

Question

我想相对于另一个元素(ElemB)定位一个元素(ElemA)。因此，我使用jQuery ui位置实用程序来实现此目的，如下所示：

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

但我希望这个定位是用动画效果来完成的。

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

您可以看到我到目前为止在这个fiddle中所做的工作。我想要的elemA滑动到新的位置与动画效果使用jQuery和jQuery用户界面。

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');  

});​

DEMO

还要检查css，我也已经编辑过了。

Answer 2

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

如果指定此选项，则将实际属性设置委托给此回调。接收两个参数:第一个参数是应该设置的位置的顶部和左侧值的散列，可以将其转发到.css()或.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>

​