Interrupt function

Ask the community
,
5

I don’t have a specific site for an example. This is a common problem for all sites.
But I did a test site https://wixmanns.wixsite.com/hover

For the button1, I added the code

let rollLeft = {
 "duration":   200,
 "direction":  "left"
};

let rollRight = {
 "duration":   200,
 "direction":  "right"
};

export function button1_mouseIn(event, $w) {
  $w('#line1').show("roll", rollLeft);
}

export function button1_mouseOut(event, $w) {
  $w('#line1').hide("roll", rollRight);
}

But if you hover the mouse over the button you will get the next thing. The hide event doesn’t work in this case.


So I changed the code

export function button2_mouseIn(event, $w) {
  $w('#line2').show("roll", rollLeft);
}

export function button2_mouseOut(event, $w) {
  $w('#line2').hide("roll", rollRight);
  setTimeout(() => {
    $w('#line2').hide("roll", rollRight);
  }, 300);
}


I don’t like this case that animation always works. First show and then hide. I can add this effect using dynamic boxes. But their use is not always possible.

I would like to interrupt the display of the animation (or other function) forcibly using Wix Code. It’s real? For example, I could add this event to mouseOut