How to create faded hover effects in Editor X?

Ask the community
,
1

Hi,
I’m new to Wix and this forum. I apologize in advance if this has been addressed already, I searched the forums for quite some time for an answer before posting this.

My issue is with creating simple faded hover effects for images in Editor X. I followed the example code below, and it works as long as I don’t move the mouse too fast.

My understanding is that new inputs are ignored during the fade “duration” timer, meaning that if I move the mouse out of the image(or Box1 in this case) during the first 500ms, onMouseOut will not trigger and the image will remain hidden. If I set the “duration” to 0ms it works every time, but I really want the smooth faded effect.

I hope someone has a solution or work around for this.

$w.onReady(function () {
$w(‘#Image1’).onMouseIn( (Event) => {
let fadeOptions = {
“duration”: 500,
“delay”: 100
};
$w(“#Image1”).hide(“fade”, fadeOptions);
} );
} );
​
export function Box1_mouseOut(event) {
let fadeOptions = {
“duration”: 500,
“delay”: 100
};
$w(“#Image1”).show(“fade”, fadeOptions);
}

2

I haven’t tried it, but I’d guess it’s ignored because you can‘t show() an element that is not hidden yet and vice versa.
so you can try:
//onMouseIn
$w(“#image1”).hide();
$w(“#image1”).show(fade, fadeOptions);
//and the same idea for the other way.

3

Alternatively, instead of show-hide methods you can use Wix-animations to make it transparent or opaque overtime.

4

It works perfect now, thanks! I’m sure you meant //onMouseOut (in case someone else stumbles across this)