Hello, I need help for the mouseIn and mouseOut effect. Here is the link for the website : https://trevth.wixsite.com/pf-v4
Whenever you pass by the “Menu button” on the top/right of the page very fast, you will notice that the animation stop midway.
It happens the same for the buttons when you enter the menu.
Actually, to avoid the problem, you need to wait for the mouseIn animation to finish before activating the mouseOut animation or it will bug.
Does anyone know which code to use to stop the mouseIn animation midway so the mouseOut animation can activate without bugging ?
My setting for the animation is quite speed on purpose :
I have to lower the animation speed time (duration : 150) to avoid the bug, but the problem still occure if you pass the mouse fast enough on the button.
This is not a bug and can be easily solved.
The animation looks that way due to the fact that when the change is really quick, like in the case of a quick passing of the cursor, the two functions (mouseIn / mouseOut) can not be resolved on time.
You can simply solve this issue by using a promise that will execute the second part of the function only after the first part is resolved.
Thank you very much for the information, I appreciate. Do you have any idea to guide me?
should I use the code ‘’ .then =>‘’ or ‘‘if’’ ?
I’m lookin for an easy way but could not find the proper code on forum or YouTube yet.
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.
I really really really tried hard for hours, can any developer give me the line of code please,
I just want to stop the animation midway so the animation of mouseOut can activate correctly.
Hi Trevth, Did you get anywhere with this?
I am having the same issue.
I don’t think it will work for your solution, I am thinking that there must be a line of code which which would return the page to how it was when it loaded. I could them put this at the top of any other mouse in code. At least then I wouldn’t have loads of animation running at the same time.
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);
} );
}
In my case problem was solved putting the elements inside a container box, and the mouse in/out function to happen in the container box properties. Hope it helps
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)
}
Well done!
Some people just need some time to solve their problem .
As i know, an interruption of an animation is not possible. The animation always runs till end. So you will have to to some workarounds, like you already did, to find a satisfactorily semi-solution.
.