[HELP] show() after hide() element in the same callback issue

Ask the community
,
1

Hi,

I’m trying to achieve the following effect:
On button click the existing text element will hide with a fade effect and then changed text will appear with a fade effect.

I have 2 objects: #text1 and #button1
I’ve added a simple callback function to my button in button properties:

export function textHideTest(event) {

	//Add your code for this event here: 

	$w('#text1').hide("fade");

	$w('#text1').text = "My text 2";

	$w('#text1').show("fade");

}

Before button click:

After button click:

Page inspection:

845×189 77.7 KB

When I click the button the text disappears as I expect. The issue is that its not appears again.
When I inspect the page I see that text object has “visibility: hidden” property.
An interesting thing is that when I press the button again text appears.

Is there a limitation for two animations in one callback? What I’m doing wrong?

Thanks in advance,
Alexander

2

The hide() and show() functions return a Promise which you will need to handle. Once the hide() is finished then you can move on to the next line of code, etc.

See these two articles for more information about Promises:

3

Thanks Yisrael! That fixed my problem.