Fade-in and fade-out multiple objects on homepage

Hello. I have 3 different sentences that i need to fade in / out in the same place one after the other; 5sec delay-
the last sentence should remain with a button.
I’m trying the code:

let fadeOptions = {
 "duration":  4000,
 "delay": 1000
};

$w("#text26").hide("fade", fadeOptions);

and it works just for my first object.
how can y make it work for multiple objects?
please help

Website link: https://nina9487.wixsite.com/pontem now is just working on one sentence.

1 Like

You will need this one…

setTimeout(()=>{        },500) 

Put your code between the 2-curly brakets, which should have a delay of 5-secs.

5-secs = 500 milli-secs

Good evening Ahmad ! :grin:

What is your main goal for doing this? What is the for loop for? Do you want to create an infinite fade loop (in and out)?

If so, you can use Wix Animation to create this effect, not saying that you can’t create it with code, it’s just that you don’t have to.

Here’s an example:

import wixAnimations from 'wix-animations';

// Define the animation timeline.
const fadeTimeline = wixAnimations.timeline({
    repeat: -1, // Repeat the animation for ever.
    repeatDelay: 1000 * 3, // The time between each successful animation
    yoyo: true // Reverse the animation when it's done - fade in and out.
});

// The element that we want to animate
const element = $w('#image');

// Animations
const fadeAnimation = {
    opacity: 0,
    duration: 700 // In milliseconds
};

// Apply the animation on the above element using the timeline created above
fadeTimeline.add(element, fadeAnimation);

Hope this helps~!
Ahmad

@russian-dima good evening! You catched me :joy:

Also, 5 seconds equal 5000 milliseconds, not 500 :wink:

@ahmadnasriya
Haha, yeah you are right. That was because of you xDDDD.
I typed to fast xD, i saw you typing :rofl:

Hmmm, nice one! Like always!

Thank you!! Oh you are making my day. :grinning: than you so much for your help i’m learning code but sometimes simple things are just so difficult !

let me be clear:
I have 3 different sentences
#text26
#text86
#text96

that have to make a loop, just one time (is just 3 sentences that explain the company) what i need is:

#text26 fade in, stay for 5 seconds, then fade out.
after #text86 to fade in, stay for 5 seconds, then fade out.
finally #text96 to fade in with a button #button1 and stay there.

The #button1 is just a link to the about us page.

I have no clue how to make this happen! please help!

@manuelapblanco
Ok, let’s make things be very very simple.
I think Ahmads GOOD suggestion is a little bit more difficult to understand for a newbie.

OK, you have 3-sentences right?
Let’s define them… here we go…

let sentence1 = $w('#text26')
let sentence2 = $w('#text86')
let sentence3 = $w('#text96')


setTimeout(()=>{ sentence1.hide('fade'), sentence2.show('fade')},5000) 

setTimeout(()=>{sentence2.hide('flip'), sentence3.show('flip')},10000) 

setTimeout(()=>{sentence3.hide('float'), $w('#button1).show('bounce')},15000) 

Put everything into the “onReady”-function…

$w.onReady(()=>{

}) 

RESULT:

$w.onReady(()=>{
    let sentence1 = $w('#text26')
    let sentence2 = $w('#text86')
    let sentence3 = $w('#text96')
    let myButton = $w('#button1'))
    
    setTimeout(()=>{ sentence1.hide('fade'), sentence2.show('fade')},5000) 
    setTimeout(()=>{sentence2.hide('flip'), sentence3.show('flip')},10000) 
    setTimeout(()=>{sentence3.hide('float'), myButton.show('bounce')},15000) 
}) 

It’s just a quick example. Probably you have to change the right sequence by your own. This should be a good practise for you.

@russian-dima thank you so so so so much! :star:

@manuelapblanco
Did it work? It was just an quick idea. Did not test it.:sweat_smile:

You could also use another structure… like this…

setTimeout(()=>{ 
    sentence1.hide('fade'), sentence2.show('fade')
    setTimeout(()=>{
        sentence2.hide('flip'), sentence3.show('flip')
        setTimeout(()=>{
            sentence3.hide('float'), myButton.show('bounce')
        },5000) 
    },5000)
},5000)  

There are probably more efficient solutions to generate this, but these are surely the fastest :grin:

@russian-dima slow down buddy, no need to rush … I won’t eat you :japanese_goblin:

@ahmadnasriya :sweat_smile:

@russian-dima I don’t think the code is difficult for newbies :grin:, but your second answer is much simpler than mine. Good Job!

@manuelapblanco You can use my example above or @russian-dima 's second answer, it’s a great answer, simpler and easier than mine, but if you’re into learning, I suggest you take the extra mile to learn how the animation example above work, and as always, happy coding :wink:

@ahmadnasriya
At this point i agree with Ahmad! By taking extra-miles you get better!
Or in my own words → just learning by doing.
You don’t do it = you don’t learn it!

@russian-dima :joy::joy:

@russian-dima Yesss it worker for desktop but when I preview the mobile version I just have all the sentences there with no animations at all! why??
is there a way to make it work on mobile version too??? please help!!
thank you!!