animate 实现到达某个元素旁

要现到达某个元素旁的动画效果，可以使用 jQuery 的 `animate()` 方法和 `offset()` 方法。`offset()` 方法可以获取元素的位置信息，从而让我们知道动画需要过渡到哪个位置。具体步骤如下：

1. 引入 jQuery 库。

2. 获取目标元素和当前元素。可以使用 `$` 函数、`id` 或其他选择器来获取元素。

3. 使用 `offset()` 方法获取目标元素的位置信息。

4. 使用 `animate()` 方法，让当前元素过渡到目标元素的位置。可以使用对象或字符串的形式来设置多个属性。

5. 设置过渡时间和缓动函数。过渡时间越长，动画的速度就越慢。缓动函数会影响动画的加速度和减速度，从而让动画更加自然。

示例代码如下：

HTML

<button id="btn">点击我</button>
<div id="box1"></div>
<div id="box2"></div>

CSS

#box1 {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 100px;
  height: 100px;
  background-color: red;
}
#box2 {
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

JavaScript

$('#btn').click(function() {
  var targetOffset = $('#box2').offset();
  $('#box1').animate({
    'top': targetOffset.top,
    'left': targetOffset.left
  }, 1000, 'easeOutElastic');
});

在 JavaScript 中，我们使用了 jQuery 的 `$` 函数来获取元素。当按钮被点击时，我们使用 `offset()` 方法获取了目标元素的位置信息。然后，我们调用了 `animate()` 方法来让当前元素过渡到目标元素的位置。`animate()` 方法的第一个参数是一个对象，用于设置要过渡的 CSS 属性和终止值。`animate()` 方法的第二个参数是过渡时间，单位是毫秒。第三个参数是缓动函数，可以使用 jQuery 提供的预设函数（如 `easeOutElastic`）或自定义函数。