Need a solution how to stop the MouseIn animation and execute the MouseOut animation without needing to hover again...

Ask the community
,
1

Hello CORVID Forum,

I’m trying to create a floating Social Button that interacts with MouseIn/Out Events.

The problem is that whenever the mouse cursor moves fast over the button, it only executes the 1st function, leaving the box open, and I need to hover again to close it. Is there any way of doing this, i’m new in coding.

I use the code below.

export function iconYoutube_mouseIn(event) {
 let slideOptions = {
 "duration": 500,
 "delay": 0,
 "direction": "right"    
     };
    $w("#boxYoutube").show("slide", slideOptions)
}

exportfunction boxYoutube_mouseIn(event) {
    $w("#boxYoutube").show()
}

export function boxYoutube_mouseOut(event) {
 let slideOptions = {
 "duration": 500,
 "delay": 0,
 "direction": "left"
    };
    $w("#boxYoutube").hide("slide", slideOptions)
}

Thanks in advance! :grinning:

2

Hi!

There isn’t another way to code this. It is just a fast movement that the browser can’t detect.

However there is a solution to this program. But I recommend to don’t use it.

You can set a MouseIn event to the background image or strip. So when your mouse isn’t on the youtube icon but on the strip around the icon the box disappear.

This is the code:

<script>
export function iconYoutube_mouseIn(event) {
 let slideOptions = {
 "duration": 500,
 "delay": 0,
 "direction": "right"    
     };
    $w("#boxYoutube").show("slide", slideOptions)
}

export function boxYoutube_mouseIn(event) {
    $w("#boxYoutube").show()
}

export function boxYoutube_mouseOut(event) {
 let slideOptions = {
 "duration": 500,
 "delay": 0,
 "direction": "left"
    };
    $w("#boxYoutube").hide("slide", slideOptions)
}

export function strip7_mousIn(event) {
let slideOptions ={
"duration":500,
"delay":0,
"direction":"left"
    };
      $w("#boxYoutube").hide("slide", slideOptions)
</script>

I hope this helps!