如何在js中为数组值设置动画？答案

【问题标题】：How do I animate an array value in jS?如何在js中为数组值设置动画？
【发布时间】：2022-01-08 01:37:41
【问题描述】：

我正在使用这个MagicMouse，它工作得很好。当我将鼠标悬停在一个元素上时，我想为宽度和高度值设置动画，然后在用户悬停后将它们恢复正常。

我有以下代码在 jS 数组中定义光标的值：

options = {
    "cursorOuter": "circle-basic",
    "hoverEffect": "pointer-overlay",
    "hoverItemMove": false,
    "defaultCursor": false,
    "outerWidth": 30,
    "outerHeight": 30
      };
    magicMouse(options);

然后我有这个代码来处理悬停：

$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) {
  if (e.type == "mouseenter") {
    console.log('hovering');
  } else {
    console.log('unhovering');
  }
});

鼠标本身和悬停功能按预期独立工作，但是我需要能够为 if 语句中的宽度和高度值设置动画。

我可以做类似MagicMouse.outerWidth = 70 的事情吗？

我不熟悉更新源自数组的值，如果有人能指出我正确的方向，我将不胜感激！

编辑：

我试过这个，它“工作”，但它会导致一个错误，光标在屏幕的角落重新生成，就好像它在每次悬停事件时重新初始化一样。

$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) {
  if (e.type == "mouseenter") {
    magicMouse({
      "outerWidth": 60,
      "outerHeight": 60
    });
    console.log('hovering');
  } else {
    magicMouse({
      "outerWidth": 30,
      "outerHeight": 30
    });
    console.log('unhovering');
  }
});

【问题讨论】：

标签： javascript jquery arrays mouse-cursor

【解决方案1】：

我建议查看magicMouse source code。您会看到“光标”只是另一个 DOM 元素，它的形状取决于应用的 CSS 类。

这是覆盖默认库行为的基本方法：

var magicMouseCursor = document.getElementById("magicMouseCursor");
var hoverEls = document.querySelectorAll(".magic-hover");
    hoverEls.forEach((item, i) => {
      item.addEventListener("mouseenter", event => {
          magicMouseCursor.classList.add('is-hover');
      });

      item.addEventListener("mouseleave", event => {
          magicMouseCursor.classList.remove('is-hover');
      });
    });

div#magicMouseCursor.is-hover {
    width: 60px !important;
    height: 60px !important;
}

【讨论】：

谢谢你，我最终用我原来的悬停效果调整了这个答案的一部分，它有效:)

【解决方案2】：

Vladislav Leonov 的答案和我的原始代码相结合，使这项工作发挥了作用。

工作代码：

$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) {
  var magicMouseCursor = document.getElementById("magicMouseCursor");
  if (e.type == "mouseenter") {
    magicMouseCursor.classList.add('is-hover');
  } else {
    magicMouseCursor.classList.remove('is-hover');
  }
});

div#magicMouseCursor.is-hover {
    transition: all 0.2s!important;
    width: 60px !important;
    height: 60px !important;
}

【讨论】：