show element for X seconds, and then hide

Ask the community
,
1

Hi everyone, I am trying to figure out how to show an element for a set amount of seconds and then hide it again.

Here is my current code – on this function’s click, a message saying “log in” appears (#logindone). However, it never disappears. I am trying to get it to disappear after a certain amount of seconds.

export function notdone_click(event, $w) {
$w(‘#logindone’).show();
}

Any idea of how to do this?

2

To hide it you simply use the .hide() function.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html

To do it after a set time, then you need to look at using the setTimeout function.

You can simply search this forum for previous posts about setTimeout which will give you examples of code that you can look at adapting to suit your own needs.

Plus, you can also look at other websites like here for more info.
https://www.w3schools.com/jsref/met_win_settimeout.asp

3

Thanks! For some reason it wasn’t working before, but adding that worked for me. thanks again

4

Can you please show us the code? I have been trying to do this and GOS keeps directing towards different link but no way to do it. (I am new to this )

5

Hello Satvik,

you should first read the community-guidelines…
https://www.wix.com/corvid/forum/community-discussion/corvid-community-guidelines

It is not recommended to bump-up old posts. Instead, you can open your own post with your own issue.

But anyway, for your project you will need the setTimeout-command for example…

setTimeout(()=>{         },3000)

This would start a process after 3 seconds.
You put your code into the —> { here your code which shall start/run after 3sec. }

6

@russian-dima Thanks a lot!

I have used the code and it works but the whole animation happens the moment webpage loads - not until the user scrolls to that point on the webpage.

What can I do differently?

$w.onReady( function () {
$w( “#image9” ).show();
setTimeout(() => {$w( “#image9” ).hide( “fade” ); }, 4000 );
});

7

@satvikvats98
Yes that is CORRECT. That is exactly what you have coded.

  1. When page has loaded…
    https://www.wix.com/corvid/blog/post/getting-to-know-corvid-by-wix-what-is-w
  2. start some code… (
$w("#image9").show();

The image will be shown imediately.
3) after 4sec. when the page-loading has started, you fade out the image…

 setTimeout(() => {$w("#image9").hide("fade"); }, 4000);

You will need more then just this little part of code to achieve your aim!

Take a look here at this example…
https://russian-dima.wixsite.com/meinewebsite/reading-position

Try to understand how it works and than combine YOUR code with the one shown in the EXAMPLE. :wink:

Godd luck and happy coding.