如何用jQuery animate实现Div绕另一Div边缘循环移动（仿动态边框）

嘿，这两个需求其实逻辑相通，都是靠分步动画让元素沿着目标容器边缘移动，用jQuery的animate就能搞定，我给你拆解具体实现：

首先我们需要基础的HTML结构，一个作为轨道的目标容器，和一个要移动的元素：

<div id="targetDiv" style="position: relative; width: 300px; height: 200px; border: 1px solid #ccc; margin: 20px;">
  <div id="movingDiv" style="position: absolute; width: 30px; height: 30px; background: #f00; top: 0; left: 0;"></div>
</div>

核心思路是把循环移动拆成四个方向的分步动画，每个动画完成后触发下一个，最后递归实现无限循环：

function loopMove() {
  const target = $('#targetDiv');
  const mover = $('#movingDiv');
  const targetW = target.width();
  const targetH = target.height();
  const moverW = mover.width();
  const moverH = mover.height();

  // 1. 向右移动：从左边缘滑到右边缘，top保持0
  mover.animate({ left: targetW - moverW }, 1000, 'linear', function() {
    // 2. 向下移动：从顶部滑到底部，left保持最大值
    mover.animate({ top: targetH - moverH }, 1000, 'linear', function() {
      // 3. 向左移动：从右边缘滑回左边缘，top保持最大值
      mover.animate({ left: 0 }, 1000, 'linear', function() {
        // 4. 向上移动：从底部滑回顶部，完成后递归启动下一轮
        mover.animate({ top: 0 }, 1000, 'linear', loopMove);
      });
    });
  });
}

// 启动循环动画
loopMove();

这里用linear缓动是为了让移动速度均匀，避免忽快忽慢；计算目标容器和移动元素的宽高差，是为了确保移动元素刚好贴着边缘走，不会超出容器范围。

这个需求只需要调整移动元素的样式，让它模拟成“边框条”，配合阶段切换就能实现流动感：
先调整HTML里的移动元素初始样式：

<div id="targetDiv" style="position: relative; width: 300px; height: 200px; border: 1px solid #eee; margin: 20px;">
  <div id="borderMover" style="position: absolute; width: 0; height: 2px; background: #00f; top: 0; left: 0;"></div>
</div>

然后通过动画+样式切换，让细条模拟边框的四个边：

function borderAnimation() {
  const target = $('#targetDiv');
  const mover = $('#borderMover');
  const targetW = target.width();
  const targetH = target.height();

  // 1. 顶部边框：从左向右伸展
  mover.animate({ width: targetW }, 1000, 'linear', function() {
    // 切换成右侧竖边框：调整宽高和位置
    mover.css({ width: '2px', height: targetH, top: 0, left: targetW - 2 });
    // 2. 右侧边框：从上向下滑动
    mover.animate({ top: targetH - 2 }, 1000, 'linear', function() {
      // 切换成底部横边框：调整宽高和位置
      mover.css({ width: targetW, height: '2px', top: targetH - 2, left: targetW - 2 });
      // 3. 底部边框：从右向左收缩
      mover.animate({ left: 0 }, 1000, 'linear', function() {
        // 切换成左侧竖边框：调整宽高和位置
        mover.css({ width: '2px', height: targetH, top: targetH - 2, left: 0 });
        // 4. 左侧边框：从下向上滑动，完成后重置状态启动下一轮
        mover.animate({ top: 0 }, 1000, 'linear', function() {
          mover.css({ width: 0, height: '2px', top: 0, left: 0 });
          borderAnimation();
        });
      });
    });
  });
}

// 启动动态边框动画
borderAnimation();

你可以根据需求调整动画时长、边框颜色、细条粗细，甚至给动画加不同的缓动效果，让流动感更贴合你的设计。

内容的提问来源于stack exchange，提问作者Maanstraat