嘿，很高兴能帮你搞定这个需求！用anime.js给所有同类别名的元素加悬停效果，同时让指定函数在每个按钮实例上触发，其实没那么复杂，我给你一步步拆解，附上完整示例：

首先得确保你的项目里已经引入了anime.js——不管是用CDN还是本地文件都行。然后给所有需要加效果的按钮统一加个类名，比如hover-trigger-btn，这样方便批量选中。

举个HTML结构的例子：

<button class="hover-trigger-btn">按钮1</button>
<button class="hover-trigger-btn">按钮2</button>
<button class="hover-trigger-btn">按钮3</button>

核心思路是：先选中所有目标按钮，然后给每个按钮分别绑定鼠标进入/离开事件，在事件回调里用anime.js执行动画，同时调用你指定的函数。

这里我写个完整的JS示例，里面包含悬停动画和自定义函数的调用：

// 等DOM加载完成再执行，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标按钮
  const buttons = document.querySelectorAll('.hover-trigger-btn');

  // 定义你要在按钮上运行的指定函数
  function customButtonFunction(button) {
    console.log(`当前触发的按钮是：${button.textContent}`);
    // 这里可以写你的业务逻辑，比如发送请求、修改DOM等
  }

  // 遍历每个按钮，绑定事件
  buttons.forEach(button => {
    // 鼠标进入时的动画+函数调用
    button.addEventListener('mouseenter', function() {
      // anime.js动画：缩放+背景色变化，参数可以按需调整
      anime({
        targets: this,
        scale: 1.1,
        backgroundColor: '#4CAF50',
        duration: 300,
        easing: 'easeOutQuad'
      });
      // 调用指定函数，把当前按钮传进去方便操作
      customButtonFunction(this);
    });

    // 鼠标离开时的恢复动画
    button.addEventListener('mouseleave', function() {
      anime({
        targets: this,
        scale: 1,
        backgroundColor: '#ffffff',
        duration: 300,
        easing: 'easeInQuad'
      });
    });
  });
});

为了让动画效果更明显，你可以给按钮加一些基础CSS：

.hover-trigger-btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: none; /* 禁用原生过渡，避免和anime.js冲突 */
}

• 如果你的按钮是动态生成的（比如通过AJAX加载），那上面的静态选中方式就不行了，得用事件委托：把事件绑定到父元素上，然后通过event.target判断是不是目标按钮，这样新生成的按钮也能触发效果。
• anime.js的动画参数非常灵活，你可以调整duration（时长）、easing（缓动函数）、opacity（透明度）等属性，做出你想要的效果。
• 自定义函数里可以根据传入的按钮实例做针对性操作，比如修改按钮文本、添加额外样式等。

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