使用动画效果定位元素（jQuery UI）答案

【问题标题】：Position an element with animation effect (jQuery UI)使用动画效果定位元素（jQuery UI）
【发布时间】：2012-10-20 08:11:20
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案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，我也编辑过。

【讨论】：

【解决方案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>

【讨论】：