Show and Hide animations not working

Ask the community
1

I have a problem with adding simple animation/effects to the show() and hide() functions in Wix Classic Editor. By way of example, in the following code I’ve assigned an OnClick function to two buttons. Button 1 simply toggles visibility of a container (box1) and button 2 does the same, but with the addition of a fade effect. Button 1 works exactly as expected, but button 2 does nothing at all (doesn’t show/hide the box and doesn’t log to the console). If I remove the fade effect from button 2, it also works as it should. I expect I’m missing something simple, but have been left scratching my head.

$w.onReady(function () {

    $w("#button1").onClick(() => {

        if ($w("#box1").hidden) {
            $w("#box1").show().then(() => {
                console.log("Box is now visible");

            });
        } else {
            $w("#box1").hide().then(() => {
                console.log("Box is now hidden");

            });
        }
    });

    $w("#button2").onClick(() => {

        if ($w("#box1").hidden) {
            $w("#box1").show('fade').then(() => {
                console.log("Box is now visible");

            });
        } else {
            $w("#box1").hide('fade').then(() => {
                console.log("Box is now hidden");

            });
        }

    });

});
2

Hi, @rightclicksolutions !!

Hello, I tried your code as it is, and for now, the fade effect seems to be working. :upside_down_face:

Is there any other click event or something else assigned to those buttons? How about setting up the elements again?

3

Thank you @onemoretime for trying this, and for your suggestion.

No, I don’t have any other actions assigned to the buttons.

I’ve set up a new test site with just the three elements and, sure enough, it works exactly as expected. What’s confusing me is that, on my original site, this code doesn’t work in preview mode whereas, on this new test site it works fine.

I have used similar code on other sites in the past and I’m sure that it used to work fine in both preview and live. In fact I have just gone back to one of my old ‘test’ sites which uses the ‘fly’ animation and, if I now run this in preview, it actually screws up the position of the element on the site, sometimes leaving it off the screen, requiring me to reconfigure the page manually. I guess I will just have to be careful not to use preview mode for testing these functions. :roll_eyes:

Thanks for your help.