How to stop mouseIn animation midway for mouseOut animation?

I was able to find a reliable solution (still not ideal). I just keep track of all of the states of all of the items of my repeater in a json dictionary and check those states when I mouseIn or mouseOut. If the state is mid-transition, I just set a timer for slightly longer than the transition duration before trying to transition again.

function onHover($w, hoverState)
{
 test[$w("#dayName").text] = true
 if (hoverState)
    {
        $w("#dayName").hide("float", {"direction":"top", "duration":transitionSpeed/4}).then( (results) => {
            test[$w("#dayName").text] = false
        })
    }
 else
    {
        $w("#dayName").show("float", {"direction":"top", "duration":transitionSpeed/4}).then( (results) => {
            test[$w("#dayName").text] = false
        })
    }
}

let test = {}
export function dayCard_mouseIn(event, $w) {
 if (test[$w("#dayName").text])
        setTimeout(function(){ onHover($w, true) }, transitionSpeed/3);
 else
        onHover($w, true)
}

export function dayCard_mouseOut(event, $w) {
 if (test[$w("#dayName").text])
        setTimeout(function(){ onHover($w, false) }, transitionSpeed/3);
 else
        onHover($w, false)
}