Issues with show() funtion and onMouse event

Ask the community
, ,
1

Question:
Why isn’t the show() function with an effect working in an onMouseIn/onMouseOut event?

Product:
Wix Editor with Velo

What are you trying to achieve:
I want to create an animation where a social bar appears when hovering over an element (either an image or a box). It works perfectly when using show() without any effect, but when trying to apply an effect like “fade” or “slide,” nothing happens.

What have you already tried:
I tested whether the hidden property changes with show(), and its value becomes false. However, when using show("fade"), the hidden value remains true (as initially set in the Wix Editor).

I also tried using an onClick event assigned to a button, and the result was the same: using show() without effects changes the hidden value to false, but using an effect does not.

Interestingly, if I call show("fade") in onReady, the animation works as expected.

Additional information:

  • I verified that the issue is specific to events like onMouseIn and onMouseOut.
  • The onReady event successfully triggers the animation using show("fade").
  • The hidden property behavior suggests that the effect is not being executed correctly in certain event contexts.
// Trying with a button
$w('#button1').onClick(() => {
  $w('#sb1').show("fade");
  let isHidden = $w("#sb1").hidden;
  console.log(isHidden);
});

// Trying with onMouse event
$w('#image1').onMouseIn(() => {
  $w('#sb1').show("fade");
});
2

The issue occurs because certain event-driven contexts like onMouseIn or onMouseOut in Wix may not properly handle effects applied via the show() or hide() functions. This is likely due to timing conflicts or how these events handle animations within the browser rendering process. Use a combination of the onMouseIn or onMouseOut event with a slight delay to ensure the effect executes smoothly. Additionally, confirm the target element’s visibility state before calling the animation to avoid redundant operations.

3

Hi, Gabriel_Gallo !!

Please try the following.

// Trying with a button
$w('#button1').onClick(() => {
  $w('#sb1').hide();
  $w('#sb1').show("fade");
});

// Trying with onMouse event
$w('#image1').onMouseIn(() => {
  $w('#sb1').hide();
  $w('#sb1').show("fade");
});