Small mouse in/out glitch

Ask the community
,
1

Just to inform the team that the mouse in feature often remains active even when the mouse is out of the designated area.

Many thanks.

1 Like
2

can you reproduce it? maybe share a video and the code in your site?
thanks!

3

I believe animation effects were causing the glitch/preventing the objects fading out. I’ve taken them out and now it works!

Anyway an easy fix! Thank you for your help.

4

No, not due to animation. But I dont know any other reason

5

Hey,

Should the issue persists, please share with us a video of the issue using screencast . Simply recreate the issue while recording the steps and add the screencast.com URL to your response so we can have a look.

Thank you in advance.

6

I have experienced this issue in the past. I too believe it is due to the animation. I will recreate if I have the time. But to explain what I experienced.

I had onMouseIn/Out functions written something like this.

export function funcName_onMouseIn() {
   $w("#someObject").show('FoldIn');
}

export function funcName_onMouseOut() {
   $w("#someObject").hide('FoldOut');
}

When you moused over the function Object I had some “Hover Text” ‘FoldIn’, if the mouse was over the function Object for a long enough period of time and then “Moused Out”, the “Hover Text” would ‘FoldOut’ appropriately. BUT, if you “Moused Out” too soon, the “Hover Text” would remain and you’d have to Mouse In & Out again for it to ‘FoldOut’.

Hope that explains, will try to make a video of it when I have the time.
Cheers

7

I am getting this glitch as well. I posted a separate ticket including screencast. any help would be great https://www.wix.com/code/home/forum/questions-answers/mouse-in-out-glitch

8

I’m having the same issue with the hover in/out glitch. When I pass over the element with mouse quickly, the hover out doesn’t occur. However, when I remove the animation (fade in my case), the hover out works no matter how quickly my mouse passes over the element. Really hoping Wix resolves this bug - the animations really elevate the customer experience. Thanks!

9

I’m also experiencing this when trying to show/hide a line with the “slide” effect. If I move the mouse out quickly it won’t trigger the mouseOut. Anyone found a fix? Seems super buggy.

10

Experiencing the same issue can someone help ?

Code below:
export function box4_mouseIn ( event ) {
$w ( ‘#image’ ). show ( ‘FadeIn’ );
}

export function box4_mouseOut ( event ) {
$w ( ‘#toilet’ ). hide ( ‘FadeOut’ );
}

The problem
hovering over the container box triggers a fade-in image,
Exiting the area completely still leaves the image visible without triggering the mouse out

The issue is fixed when the Fades are removed

11

Hi, here is a possible solution (thanks to Alexander Z. from Wix).

Create a public file queues.js and put the following code inside:

//queues.js 
export const createQueue = (maxLength = 1) => {
  /** @type {boolean} */
  let isRunning = false;

  /** @type {Item[]} */
  const items = [];

  const runQueue = () => {
    if (isRunning) {
      return;
    }

    const item = items.shift();

    if (typeof item === 'function') {
      isRunning = true;

      Promise.resolve(item())
        .then(() => {}, () => {})
        .then(() => {
          isRunning = false;
          runQueue();
        });
    }
  };

  return (item) => {
    if (items.length >= maxLength) {
      items.pop();
    }

    items.push(item);
    runQueue();
  };
};

On your page write:

import {createQueue} from 'public/queues.js';
const queue = createQueue();
$w.onReady(() => {
 $w('#box4').onMouseIn(() => {
     queue(() =>  $w('#element1').show('fade'));
  })
  $w('#box4') .onMouseOut(() => {
     queue(() =>  $w('#element1').hide('fade'));
  });
})
12

i am having this exact same issue with my Editor X site and it seems like this is the solution. However I am very lost as to how/ where to create the public queue.js file. would you mind clarifying? google turns up nothing

13

@enrique-saguay create it in your public files. see image (but name it queues.js instead of new-public-file.js)

811×589 109 KB

14

@jonatandor35 Thank you so much, last question:

869×929 53.6 KB

I have coded the animation out as such, I need to rewrite all of them to be, for example

import { createQueue } from ‘public/queues.js’ ;
const queue = createQueue ();
$w . onReady (() => {

$w ( '# abtauteur ' ). onMouseIn (()  =>  { 
	queue (() => $w ( '#Stage' ). show ( "fade" ,  fadeOptions ); 
})

Right?

Where would the FadeOptions line fit in?

also I would need to fit all of the animations within the: $w . onReady (() => { line
and the last })
correct?

once again thank you so much

15

@enrique-saguay

  1. Yes, but you’re missing a right parenthesis at the end of the queue line before the semicolon.

  2. Yes. Or have it in a separate function and call the function from the $.onReady scope.