How to stop mouseIn animation midway for mouseOut animation?

Actually my code is :

export function MenuOpen_mouseIn(event, $w) {
$w(“#line1”).hide(“slide”,slideOutOptions)
$w(“#textMenu”).show(“slide”,slideInOptions)
}

export function MenuOpen_mouseOut(event, $w) {
$w(“#line1”).show(“slide”,slideOutOptions)
$w(“#textMenu”).hide(“slide”,slideInOptions) )
}

I tried with .then but still doesn’t work properly :

export function MenuOpen_mouseIn(event, $w) {
$w(“#line1”).hide(“slide”,slideOutOptions)
.then (() =>
$w(“#textMenu”).show(“slide”,slideInOptions) )
}

export function MenuOpen_mouseOut(event, $w) {
$w(“#line1”).show(“slide”,slideOutOptions)
.then (() =>
$w(“#textMenu”).hide(“slide”,slideInOptions) )
}

Should I have a line code similar to

if mouseOut.event ( (event, $w) => {
let itemId = event.context.itemId;
};

If someone can help me please, I’m really out of idea and knowledge.
I’m lookin for a code who can stop the animation midway and go to mouseOut’s animation even if the animation of mouseIn is not finish yet.