How to add another element to this code

Ask the community
,
1

  1. how do I add fade animation(1.5 sec duration) to this?

  2. I not only want to do this to text61, I want this code to work for image5 too! how do I do that?

$w.onReady(() => {
$w("#text61").hide();
setTimeout(showAndHide, 9000);
})

function showAndHide(){
$w("#text61").show().then(() => {
    setTimeout(() => {$w("#text61").hide()}, 9000);
})
}
2

There are better(?), more elegant (read: unnecessarily complicated) ways to do this, but here’s one way that’s easy to read and understand:

$w.onReady(() => {
    $w("#text1").hide();
    setTimeout(showAndHide1, 9000);
    $w("#text2").hide();
    setTimeout(showAndHide2, 9000);
})

function showAndHide1() {
    $w("#text1").show('fade').then(() => {
        setTimeout(() => { $w("#text1").hide('fade') }, 9000);
    })
}

function showAndHide2() {
    $w("#text2").show('fade').then(() => {
        setTimeout(() => { $w("#text2").hide('fade') }, 9000);
    })
}

The way the Promises works allows you to just add additional elements to be hidden/shown.

3

how can I add fade animations to this?

and i added that 2nd element like this
Noobish way I guess

$w.onReady(() => {
$w("#text61,#image5").hide();
setTimeout(showAndHide, 9000);
})

function showAndHide(){
$w("#text61,#image5").show().then(() => {
	setTimeout(() => {$w("#text61,#image5").hide()}, 9000);
})
}
4

@srrsweethome You can use many different effects (including fade ) by adding the effectName and effectOptions parameters to the hide() and show() calls.

5

I changed the code in my previous answer to include the fade . Please refer to the documentation for more information.

6

I was trying to keep it super simple before, but maybe you prefer it this way:

$w.onReady(() => {
    $w("#text1, #text2").hide();
    setTimeout(showAndHide, 3000);
})

function showAndHide() {
    $w("#text1, #text2").show("fade").then(() => {
        setTimeout(() => { $w("#text1, #text2").hide("fade") }, 3000);
    })
}
7

thanks a lol I am new to this thanks again for helping me sry for rude question if u feel that

8

@yisrael-wix I am new to this coding and stuff I just turned on dev mode to make a text appear and disappear with fade animation but your first one made me understand the how it works and it’s super simple i prefer that after reading it this morning

I was in bad mood earlier,sorry🙇

(Sorry for grammar mistakes)

9

@srrsweethome Welcome to the forum. Seems like you were able to pick things up, and I hope you will continue to learn Velo. The community is here to help when you run into problems.

Don’t worry about your grammar. Well, at least don’t worry about your English grammar. On the other hand, you will have to be careful with Javascript.

10

@yisrael-wix thanks for your support I am a follower for your effort😃

earlier I was just trying to copy and paste so I felt like you are just complicating things until I trued to understand what is in it this morning. Now after reading 1st one now I prefer first one with animation because I can adjust when the elements show up seperately

( the first code or script or idk what else is belong to J.D. I don’t have any idea how this works)

11

@srrsweethome It’s very important to realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want. And so far, so good. Keep learning and we’re here for you.

12

@yisrael-wix Hey! can you tell me how to pin to screen text or image on mobile site

13

@yisrael-wix hey by giving me super simple “code or script or idk what” i am able to add fade animation by myself, thanks for your guidance

$w.onReady(() => {
    $w("#text60").hide();
    setTimeout(showAndHide1, 9300);
    $w("#image5").hide();
    setTimeout(showAndHide2, 10000);
})

function showAndHide1() {
    $w("#text60").show("fade").then(() => {
        setTimeout(() => { $w("#text60").hide("fade") }, 9000);
    })
}

function showAndHide2() {
    $w("#image5").show("fade").then(() => {
        setTimeout(() => { $w("#image5").hide("fade") }, 8300);
    })
}