Hide element after 2 seconds (troubleshooting)

Ask the community
,
1

Hi guys,

I’m attempting to hide an animated vector element after 2 seconds with a fade out, but the page just keeps displaying normally (without the delayed hide).

  • This is the page: https://www.heartglobal.org/home

  • The line between 7 CONTINENTS ---- 195 COUNTRIES is the element I’m trying to hide after 2 seconds.

  • The line currently has a standard animation set up: reveal from top, duration .6 seconds, delay .4 seconds. (The problem is with hiding it 1 second after it completes it initial animation.)

  • The line’s ID is #arrowone.

  • Here is my code: (also shown on attached screenshot)

$w.onReady(function () {
  setTimeout(function() {
    $w("#arrowone").hide("fadeOut")
  }, 200);
}
);

As you can likely tell, I’m very new to code. What might my code be missing here?

2734×1946 461 KB

1 Like
2

As you know →
1000 milliseconds = 1 second
Therefore, 2000 ms = 2 seconds

So, the code will probably like → 

$w.onReady(function () {
  setTimeout(function() {
    $w("#arrowone").hide("fade")
  }, 2000);
});
3

I think it is working properly now…

4

Oh my gosh… I can’t believe of all things THAT’S what I missed.

THANK YOU Ajit! You’re the man. The new animation is now in effect at https://www.heartglobal.org/home.

If anyone else runs into this same task, it will also be good to know that I also learned I was using an incorrect effect name. “fadeout” needed to be “fade”. So, final code that worked was:

$w.onReady(function () {
  setTimeout(function() {
    $w("#arrowone").hide("fade")
  }, 2000);
});
5

:grinning: