CASE statement Afterwards applied, although the order of the code is different (fade-out/fade-in onClick button event)

ildolfing · December 3, 2020, 8:32pm

Hey guys,

I’m fading in/out pictures on the click of 3 buttons (button22, button23, button25). Almost everything works fine, apart from the fact that the click event somehow doesn’t follow the right order.

When I click button22, it should do the following:

First it fades out image1,
Then via the Case statement, due to clicking of button22, it sets image1 to that link
Then it fades in image1, showing actually the image behind the link from button22.

However what it does:

First it fades out image1
Then it fades in image1 without switching the source (‘src’), so you still see the same picture it just faded out, no matter what button you clicked.
Then it QUICKLY switches the picture when it’s already back at 100% opacity. So it’s fading in with the old source behind it, although it has already passed the case statement.


$w("#image1").hide(); 

$w.onReady(() => {
    $w("#button22, #button23, #button25").onClick(event => {
        $w("#image1").hide("fade", {"duration": 500}).then( ( ) => {
 let src;
 switch(event.target.id) {
 case "button22":
                src = "https://static.wixstatic.com/media/aaa.jpg";
 break;
 case "button23":
                src = "https://static.wixstatic.com/media/bbb.jpg";
 break;
 case "button25":
                src = "https://static.wixstatic.com/media/ccc.jpg";
 break;
            }
            $w("#image1").src = src;
            $w("#image1").show("fade", {"duration": 500});
        } );
    })

Does anyone have a suggestions how to make it so that it actually sets the source before hand / empties the cache before?

ildolfing · December 6, 2020, 11:58am

Is there anything else you might want to know, so it becomes more clear what could be the solution? Kind regards, Igor

ildolfing · December 14, 2020, 5:33pm

Is there anyone that can explain why this happens? And very maybe even a way how to circumvent it?

CODE-NINJA · December 14, 2020, 7:41pm

Your “wrong” code…

$w("#image1").hide(); 

$w.onReady(() => {
    $w("#button22, #button23, #button25").onClick(event => {
        $w("#image1").hide("fade", {"duration": 500}).then( ( ) => {
 let src;
 switch(event.target.id) {
 case "button22":
                src = "https://static.wixstatic.com/media/aaa.jpg";
 break;
 case "button23":
                src = "https://static.wixstatic.com/media/bbb.jpg";
 break;
 case "button25":
                src = "https://static.wixstatic.com/media/ccc.jpg";
 break;
            }
            $w("#image1").src = src;
            $w("#image1").show("fade", {"duration": 500});
        } );
    })

Correction…

$w.onReady(() => {
    $w("#button22, #button23, #button25").onClick(async(event) => {
 await $w("#image1").hide('fade')
 let src;
 switch(event.target.id) {
 case "button22":
                            src = await "https://static.wixstatic.com/media/aaa.jpg";
 break;
 case "button23":
                            src = await "https://static.wixstatic.com/media/bbb.jpg";
 break;
 case "button25":
                            src = await "https://static.wixstatic.com/media/ccc.jpg";
 break;
        }
        $w('#image1').src = src
        $w("#image1").show('fade')
    })
})

J.D · December 14, 2020, 8:17pm

@russian-dima There’s no reason to use src = await …

CODE-NINJA · December 14, 2020, 8:30pm

@jonatandor35
Yes you are right J.D.
I did not test it, but did test it right now.

Just the await before …

$w("#image1").hide('fade')

…is needed.

Thanks for correction.

J.D · December 14, 2020, 8:38pm

@russian-dima but you know that the .then() that Igor used is equivalent to your await, so the correction is not really correction.
The problem is that it takes a short time to the new image to render and in this short time the old image is still there.
So the solution will be either to use 2 images (only one them is shown at each specific time), and replace the src of the hidden image before you start to fading out the other image. OR to use a single image but add a short timeout before you start fading it in.

CODE-NINJA · December 14, 2020, 8:46pm

@jonatandor35
I tested my given code. it seems to work good.
And yes, because you have eliminated all my other AWAITs, now it looks like it is not a correction anymore (Yes i know about then , but i do not like to use it.)

But fact is, that my simple example works, just like it should.

the first image fades out.
the image-src changes…
and then it fades in the new image (image with new src).

This was the wanted function.

J.D · December 14, 2020, 8:50pm

@russian-dima sometimes there’s a “blink” with the old image before it changes, and that the issue Igor was referring to.

CODE-NINJA · December 14, 2020, 9:08pm

@jonatandor35

I saw the blinking when i was playing around with the code, but…
this one…

$w.onReady(() => {
    $w("#button22, #button23, #button25").onClick(async(event) => {
 await $w("#image1").hide('fade')
 let src;
 switch(event.target.id) {
 case "button22":
                            src = "https://static.wixstatic.com/media/b03143_fbd4acb3908541d5875e3cb3776f50d4~mv2.jpg";
 break;
 case "button23":
                            src = "https://static.wixstatic.com/media/b03143_b82cd97efe984cfb8cdc93c2ddbc1844~mv2.jpg";
 break;
 case "button25":
                            src = "https://static.wixstatic.com/media/b03143_7070b5a8bc95484288c6853f87d70399~mv2.png";
 break;
        }
        $w('#image1').src = src
        $w("#image1").show('fade')
    })
})

works without any BLINKING for me.

Please test the last example…
https://www.media-junkie.com/simple-megamenu

I can not recognize any blinking.

CODE-NINJA · December 14, 2020, 9:11pm

Ok, just if you choose to fast the next picture → yes then you get an blinking as you described.

ildolfing · December 14, 2020, 9:11pm

I changed my code slightly with the ‘async’ function combined with ‘await’ and am now perfectly able to change the duration of the fade in/out effects! Thanks a bunch

CODE-NINJA · December 14, 2020, 9:15pm

Attention!!! This solution is not perfect, like i figured out, right now.
When cklicking on next button to fast —> some irregular animations appears.
Only if you wait everytime untill animation is done, then everything works perfect.

So i hope you can improve it, or you perhaps already have improved it.

J.D. Has right (like always)

J.D · December 14, 2020, 9:23pm

Just google “image src flickering” and you’ll find many discussions re the issue.

ildolfing · December 14, 2020, 9:29pm

Ah, and that’s also helpful. Now I know what to Google for. Thanks again, because I am going to try to make this more smooth soon

CODE-NINJA · December 14, 2020, 9:32pm

Good luck & happy coding.

Topic		Replies	Views
Change images by buttons. Ask the community code , question	16	4328	January 21, 2020
After-click function? Ask the community code , question	10	189	February 3, 2022
onClick(event) with colour change Ask the community code , question	2	249	December 7, 2021
Add fade effect on element expand/collapse Ask the community code , question	4	1673	June 1, 2022
Would Appreciate Your Help ... Ask the community code , question	2	86	June 28, 2022

CASE statement Afterwards applied, although the order of the code is different (fade-out/fade-in onClick button event)

Related topics