实现鼠标悬停时锚点文字逐色循环动画的技术问题

原代码存在三个核心问题：

• 直接操作全局colors数组的shift()和push()，破坏了颜色序列的原始结构，导致无法为每个span正确分配下一个颜色
• 错误使用$(this).next()选择元素，应该直接操作当前span节点
• intervalId未做局部处理，多个锚点同时触发hover时会出现定时器冲突

修正后的代码如下：

var colors = ["red", "lightsalmon", "violet", "skyblue"];

// 初始化：为每个字母包裹span并设置初始颜色
$('a').each(function () {
  var characters = $(this).text().split("");
  var $this = $(this);
  $this.empty();
  $.each(characters, function (i, el) {
    $this.append(`<span style="color: ${colors[i % colors.length]}">${el}</span>`);
  });
  // 为每个a标签存储当前颜色偏移量，初始为0
  $this.data('colorOffset', 0);
});

// 鼠标悬停和离开事件
$('a').on('mouseover', function () {
  var $this = $(this);
  var $spans = $this.find('span');
  // 局部化定时器ID，避免全局冲突
  var intervalId = setInterval(function () {
    // 获取当前偏移量并递增
    var offset = $this.data('colorOffset') + 1;
    $this.data('colorOffset', offset);
    // 为每个span计算新颜色
    $spans.each(function (i) {
      var colorIndex = (i + offset) % colors.length;
      $(this).css('color', colors[colorIndex]);
    });
  }, 500);
  // 存储定时器ID到当前a标签，方便离开时清除
  $this.data('intervalId', intervalId);
}).on('mouseleave', function () {
  var $this = $(this);
  // 取出定时器ID并清除
  clearInterval($this.data('intervalId'));
});

关键修改说明： #

• 给每个a标签添加colorOffset数据属性，记录当前颜色循环的偏移量，全程不修改原始colors数组，保证序列完整性
• 将定时器ID存储在对应a标签的data属性中，彻底解决多个锚点的定时器冲突问题
• 每个span的新颜色通过(当前索引 + 偏移量) % 颜色数组长度计算，确保每个字母按预设序列循环切换颜色
• 使用css()方法修改颜色，比直接覆盖style属性更安全，不会清除span上其他可能存在的样式

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