After-click function?

Ask the community
,
1

I made an image-change function to make a pressed button effect with this little code but my problem now is that image 2 (the pressed image) stays as shown. After the effect I want it to repell back directly to image 1 (not pressed) so are there any “after-click” function?

exportfunction button3_click ( event ){
$w ( “#image61” ). hide ();
$w ( “#image62” ). show ();}

2

You could just use a setTimeout() to put things back the way they were.

3

Can you please show me exactly how I shall write it togheter with my earlier code? Shall I write it like this?

let $w ( “#image61” ). hide ();. onTimeout (() => {
}, 1000 );
let $w ( “#image62” ). show ();. onTimeout (() => {
}, 1000 );
}

4

Or like this? Please answer because nothing works for me:

export function button3_click ( event ) {
$w ( “#image62” ). setTimeout ( show , 1000 );
$w ( “#image61” ). setTimeout ( hide , 1000 );
}

5

This doesn´t work either:

export function button3_click ( event ) {
let $w ( “#image62” ) = setTimeout ( show , 1000 () {
let $w ( “#image61” ) = setTimeout ( hide , 1000 () {
}

6

Hey Kristofer,

Forget about the settimeout() - I wasn’t sure what you were trying to do.

I’m a little confused about what image is shown and which is hidden and when all this happens. But, here’s a little snippet that shows how to show a hidden image (#image1), and then after 3 seconds the image takes 2 seconds to fade away.

$w.onReady(function () {
    $w("#button1").onClick((event) => {
        $w("#image1").show()
            .then(() => {
                let fadeOptions = {
                    "duration": 2000,
                    "delay": 3000
                };
                $w("#image1").hide("fade", fadeOptions);
            });
    });
});
7

Have I written this correct because it doesn´t work for me? Image61 is the one that is shown when the page is loaded and Image 62 is hidden in proporties and events until the code makes it visible. If I only would use the code you gave me for Image 62 I guess that also 61 would be visible during the same time (I don´t want that):

export function button3_click ( event ) {
$w ( “#image62” ). show ()
. then (() => {
let fadeOptions = {
“duration” : 500 ,
“delay” : 500
};
$w ( “#image62” ). hide ( “fade” , fadeOptions );

$w ( "#image61" ). hide () 
        . then (() => { 
            **let**  fadeOptions  = { 
                "duration" :  500 , 
                "delay" :  500 
            }; 
            $w ( "#image61" ). show ( "fade" ,  fadeOptions );

}

8

@kricke73 What doesn’t work? And what does work? I still don’t understand exactly what it is you want to do? What’s supposed to happen and when.

The example snippet that I posted has been tested and works. When a button is clicked it shows an image that after 3 seconds fades away. You can use that as a start. Just add the other code that you want to hide/show/whatever the other image.

9

@yisrael-wix Look at this page - I want the red button to look like if its pressed when you click at it:

https://www.swederotica.com/heterosexcomments

I have placed image 62 and image61 below the submit-button, with other words, at the same spot. With the code image61 shall be hidden and image62 shall be shown but this shall only occur during a second or less. Do you understand me now?

Your code probably works perfect for image62 but the problem is image61 that must be hidden during this function.

10

I have now tested the code for just image62 but I see no reaction when clicing on the button. Probably because image61 is shown during the same time so I need a code to temperarily hide that. My example above didn´t work so I wonder why?

11

Finally I made it work so thanks for the help! Was my earlier fault that I had written “export” function instead of “onReady” function?