Checking boolean after hiding with animation

Ask the community
,
1

I have some text which i am showing (or hiding) when the mouse enters (or leaves) a box. I am using the roll animation. The problem is that if the mouse leaves the box before the animation is complete, the text does not hide itself.

To solve this problem, I have created a variable called “ismouseout” which turns true on mouseOut, and false on mouseIn.

Here’s the code:

var ismouseout;

export function box1_mouseOut(event) {
ismouseout = true
console.log(“Leaving box.”);
console.log(ismouseout);
$w(“#twitter”).hide(“roll”)
.then( ( ) => {
if (ismouseout === false )
console.log(“ismouseout is false after animation. showing twitter…”);
$w(“#twitter”).show(“roll”);
} );
}

export function box1_mouseIn(event) {
ismouseout = false
console.log(“entering box”);
console.log(ismouseout);
$w(“#twitter”).show(“roll”)
.then( ( ) => {
if (ismouseout === true )
console.log(“ismouseout is true after animation. Hiding twitter…”)
$w(“#twitter”).hide(“roll”)
} );
}

Expected behaviour is that after the animation completes, the ismouseout variable is checked and action is taken. But there is a problem. The variable appears to constantly return as true.

2

Okay. Correct code is:

var ismouseout;

export function box1_mouseOut(event) {
ismouseout = true
console.log(“Leaving box.”);
console.log(ismouseout);
$w(“#twitter”).hide(“roll”)
.then( ( ) => {
if (ismouseout === false )
if ( $w(“#twitter”).hidden) {
$w(“#twitter”).show(“roll”);
}
console.log(“ismouseout is false after animation. showing twitter…”);
} );
}

export function box1_mouseIn(event) {
ismouseout = false
console.log(“entering box”);
console.log(ismouseout);

if ( $w(“#twitter”).hidden) {
$w(“#twitter”).show(“roll”)
.then( ( ) => {
if (ismouseout === true )
if ( $w(“#twitter”).hidden === false ) {
$w(“#twitter”).hide(“roll”);
}
} );
}
}