• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

141
Views
How do I animate an array value in jS?

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');
  }
});
about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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;
}
about 3 years ago · Juan Pablo Isaza Report

0

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;
}
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error