When I show an element, my animation does not play!

Ask the community
,
1

I’m trying to create three buttons that, once hovered on, show a different gallery of products. The buttons are in a repeater so I recognize each one with it’s label…
Code:
let fadeIn = { “duration”: 800, “delay”: 650 };
let fadeOut = { “duration”: 800, “delay”: 0 };

if ($w(“#button”).label === “LABEL1”){
$w(“#gridGallery1”).show(“fade”, fadeIn);
$w(" #gridGallery 2").hide(“fade”, fadeOut);
$w(" #gridGallery 3").hide(“fade”, fadeOut);

}  **else if**  ($w("#button").label == "LABEL2"){  
 $w(" [#gridGallery1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) ").hide("fade", fadeOut); 
   $w(" [#gridGallery](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) 2").show("fade", fadeIn); 
    $w(" [#gridGallery](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) 3").hide("fade", fadeOut);   

}  **else if**  ($w("#button").label == "LABEL3") {  
 $w(" [#gridGallery1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) ").hide("fade", fadeOut); 
 $w(" [#gridGallery](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) 2").hide("fade", fadeOut); 
 $w(" [#gridGallery](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23gridGallery1) 3").show("fade", fadeIn);   
}

When I hover over a different button, it fades out fine, but the fade in of the new gallery is instant, and unpleasant.

I’ve tried things, like replacing everything and using different effect, but nothing seems to do the trick… If there is any info into why it’s happening or how it can be fixed, I would absolutely love to hear about it!

Thanks <3

1 Like
2

Hi,
In order to create hover effect, you should use the onMouseIn & onMouseOut events and call the show / hide functions there.

I hope it’s clear,
Tal.