Question

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

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

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

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

您可以在此fiddle中看到我到目前为止所做的工作。我想使用jQuery和jQuery ui将elemA滑动到具有动画效果的新位置。

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()方法来为要定位的元素设置动画。

指定后，实际属性设置将委派给此回调。接收两个参数：第一个是应该设置的位置的顶部和左侧值的哈希值，可以转发到.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>

定位具有动画效果的元素（jQuery UI）

2 个答案:

DEMO