How do I animate an array value in jS?

Question

I'm using this MagicMouse which works just fine. When I hover over an element I want to animate the width and height values and then return them to normal once the user unhovers.

I have the following code which defines the values of the cursor in a jS array:

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

Then I have this code to handle the hover:

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

The mouse itself and the hover function work independently as expected, however I need to be able to animate the width and height values inside the if statement.

Can I do something like MagicMouse.outerWidth = 70 ?

I'm not familiar with updating values which originate from an array, if someone could point me in the right direction that would be greatly appreciated!

---

EDIT:

I tried this and it 'works' but it causes a bug where the cursor regenerates in the corner of the screen as if it's reinitialising on every hover event.

$(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');
  }
});

Answer 1

I would suggest taking a look into magicMouse source code . You will see that the "cursor" is just another DOM element and that its shape depends on applied CSS classes.

This is basic way to override the default library behavior:

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;
}

Answer 2

A combination of the answer from Vladislav Leonov and my original code made this work.

Working code:

$(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;
}