How to stop mouseIn animation midway for mouseOut animation?

Ask the community
,
7

I was having the same issue and found a solution using the then() function. I don’t know if it’s “proper” as I don’t really understand it but it seems to be working for my needs, though it doesn’t actually interrupt the mouseIn animation; It’s allowed to run to completion but then immediately followed by the mouseOut animation.

In my case I have an image with a semi-transparent overlay. I want the overlay to fade out in mouseIn and fade in on mouseOut. I have both the image and overlay attached to a box. This is easy to do with a hover box but its hardcoded animation delay feels too unresponsive to me.

let fadeOptions = {
    "duration":   150,
    "delay":      50
};

export function myBox_mouseIn(event) {
    $w('#myOverlay').hide("fade", fadeOptions);
}
export function myBox_mouseOut(event) {
    $w('#myOverlay').hide().then( (results) => {
        $w("#myOverlay").show("fade", fadeOptions);
    } );
}