Hi there,
I'm trying to create an hover effect for some elements using show / hide. The problem is that the functions are executed sequentially. First, the function is "show", and then the function is "hide". When the hover time is less than the time for the function "show" the function "hide" will not work.
While I'm using the construction
let fade = {
"duration": 300
};
export function buttonStartHotSpot_mouseIn(event, $w) {
$w("#id").show("fade", fade);
}
export function buttonStartHotSpot_mouseOut(event, $w) {
$w("#id").hide("fade", fade);
setTimeout(() => {
$w("#id").hide("fade", fade);
}, 400);
}
But this is not entirely correct.
So I'm wondering whether there is an opportunity to prematurely terminate (interrupt) the execution of the function at a certain event?
Yes, I could use dynamic boxes. But I would like to use only the Wix Code. Also dynamic boxes can't be used for repeaters.
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 have the exactly the same problem, the fade effect does not work well with the MouseIn/Out function. It always sticks when the mouse moves quickly, does anyone have any solution for this problem? I've seen it in different forums, it's a detail that ruins everything.
"Interrupting" a function is not possible (if i understand what you mean by that)
However, if you wish to stop the timeout you can save a reference to the id it generates
let timer_id = setTimeout(...)
and with this you can interrupt the timeout
clearTimeout(timer_id)
I don't have a specific site for an example. This is a common problem for all sites.
But I did a test site https://wixmanns.wixsite.com/hover
For the button1, I added the code
let rollLeft = { "duration": 200, "direction": "left" }; let rollRight = { "duration": 200, "direction": "right" }; export function button1_mouseIn(event, $w) { $w('#line1').show("roll", rollLeft); } export function button1_mouseOut(event, $w) { $w('#line1').hide("roll", rollRight); }
But if you hover the mouse over the button you will get the next thing. The hide event doesn't work in this case.
So I changed the code
export function button2_mouseIn(event, $w) { $w('#line2').show("roll", rollLeft); } export function button2_mouseOut(event, $w) { $w('#line2').hide("roll", rollRight); setTimeout(() => { $w('#line2').hide("roll", rollRight); }, 300); }
I don't like this case that animation always works. First show and then hide. I can add this effect using dynamic boxes. But their use is not always possible.
I would like to interrupt the display of the animation (or other function) forcibly using Wix Code. It's real? For example, I could add this event to mouseOut
Why do you have two hides in the mouseout? And why does the second one have a timeout?
Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.
Hi Yisrael,
Thanks for your reply. But I'm already using $w.EffectOptions
I meant whether there is an option to interrupt the function of the show? Don't wait for its completion.
You can possibly use $w.EffectOptions to let Wix Code handle the show/hide.