时间戳

首页 > 解决方案 > 功能类似于 jQuery 的位置，但不是即时的

jquery - 功能类似于 jQuery 的位置，但不是即时的

问题描述

因此，假设我必须divs 并且我想为一个设置动画，以便它最终在另一个之上，慢慢地向它移动。我知道我可以使用animate()，但我不知道如何指定目的地的坐标，我不知道先验。

使用 jQuery UI，我可以做类似的事情

$("#moving_element").position({
        my:        "left top",
        at:        "left top",
        of:        $("#destination_element"),
        collision: "fit"
    })

但没有速度参数：变化是瞬时的。

举一个我所追求的例子，这是我正在使用的 GUI 的样子。可以选择一张或多张卡片，当点击按钮时，它们必须从它们所在的任何位置都移向红色覆盖的卡片。

我怎样才能实现我所追求的？谢谢你。

标签： jqueryjquery-ui

解决方案

考虑以下示例。

$(function() {
  $.fn.animateTo = function(obj, ms) {
    if (obj.length == 0) {
      return false;
    }
    if (ms == undefined) {
      ms = 400; // Default
    }
    obj = $(obj);
    var p = obj.position();
    $(this).animate({
      top: (p.top + 26) + "px",
      left: p.left + "px"
    }, ms);
  }
  $("#draggable").draggable().dblclick(function(e) {
    $(this).animateTo(".ace", 500);
  });
})
.field {
  position: relative;
}

.card {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  position: absolute;
}

#draggable {
  top: 150px;
  left: 75px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="field">
  <div class="card ui-widget-content ace">Ace</div>
  <div id="draggable" class="card ui-widget-content">
    <p>Drag Me<br />Double Click Me</p>
  </div>
</div>

这将允许您为卡片移动到特定位置设置动画。

.animateTo（选择器或元素或 jQuery 对象）

描述：动画一个元素相对于另一个元素的位置。

推荐阅读