I’m trying to do a simple animation using show() and hide() along with “duration” and “delay”.
I have is 4 GIFs positioned in a row. GIF 1 visible on load, GIFs 2, 3 an 4 hidden. When #button1 is clicked this is what should happen: GIF1 is hidden , then GIF2, 3, and 4 are show() and hide() in sequence. Ideally, one $w(‘#button1’).onClick would call all the show and hide functions with their own delays.
Is it possible for a single onClick to call multiple functions? And if so, how would I write it?
See my crude attempt run at:
https://craig3598.wixsite.com/website/test-show-hide
Here is the code:
$w.onReady( function () {
let fadeOption1 = {
“duration”: 0,
“delay”: 100
};
let fadeOption2 = {
“duration”: 0,
“delay”: 400
};
let fadeOption3 = {
“duration”: 0,
“delay”: 600
};
$w(‘#button1’).onClick((event) => {
$w(‘#image1’).hide();
})
$w(‘#button1’).onClick((event) => {
$w(‘#image2’).show(“fade”, fadeOption1);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image3’).show(“fade”, fadeOption2);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image4’).show(“fade”, fadeOption3);
})
});
1 Like
Declare a global var:
var clicks
And on each button click add a
clicks+1
that way you’ll know the number of clicks
Carlos, I’m not sure how counting number of clicks applies to his problem. I have a series of show() and hide() that should make GIFs 1, 2,3 and 4 appear and disappear on screen. However, only GIF1 hides, GIF2,3 and 4 continue to show.
Here is my revised code, it still doesn’t work. Any help will be appreciated.
$w.onReady( function () {
let fadeOption1 = {
“duration”: 0,
“delay”: 100
};
let fadeOption2 = {
“duration”: 0,
“delay”: 500
};
let fadeOption3 = {
“duration”: 0,
“delay”: 1000
};
$w(‘#button1’).onClick((event) => {
$w(‘#image1’).hide();
})
$w(‘#button1’).onClick((event) => {
$w(‘#image2’).show(“fade”, fadeOption1);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image2’).hide(“fade”, fadeOption2);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image3’).show(“fade”, fadeOption2);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image3’).hide(“fade”, fadeOption3);
})
$w(‘#button1’).onClick((event) => {
$w(‘#image4’).show(“fade”, fadeOption3);
})
});
Yes, it is possible to call multiple show() functions or multiple hide() functions from a single onClick - as shown in the code below and on this test page:
https://craig3598.wixsite.com/website/test-show-hide
Both the Show GIFs button works, and the Hide button works. Why doesn’t it work when I combine both show() and hide() functions into one onClick?
I’d really appreciate if someone could help me with this issue!
$w.onReady( function () {
let fadeOption0 = {
“duration”: 0,
“delay”: 0
};
let fadeOption1 = {
“duration”: 0,
“delay”: 400
};
let fadeOption2 = {
“duration”: 0,
“delay”: 800
};
let fadeOption3 = {
“duration”: 0,
“delay”: 1200
};
let fadeOption4 = {
“duration”: 0,
“delay”: 1600
};
let fadeOption5 = {
“duration”: 0,
“delay”: 2000
};
let fadeOption6 = {
“duration”: 0,
“delay”: 2400
};
$w(‘#button1’).onClick((event) => { // show each gif in sequence
$w(‘#image1’).show(“fade”, fadeOption1);
$w(‘#image2’).show(“fade”, fadeOption2);
$w(‘#image3’).show(“fade”, fadeOption3);
$w(‘#image4’).show(“fade”, fadeOption4);
})
$w(‘#button2’).onClick((event) => { // hide each gif in sequence
$w(‘#image1’).hide(“fade”, fadeOption1);
$w(‘#image2’).hide(“fade”, fadeOption2);
$w(‘#image3’).hide(“fade”, fadeOption3);
$w(‘#image4’).hide(“fade”, fadeOption4);
})
$w(‘#button3’).onClick((event) => { // show and hide each gif in sequence
$w(‘#image1’).show(“fade”, fadeOption0);
$w(‘#image1’).hide(“fade”, fadeOption1);
$w(‘#image2’).show(“fade”, fadeOption2);
$w(‘#image2’).hide(“fade”, fadeOption3);
$w(‘#image3’).show(“fade”, fadeOption4);
$w(‘#image3’).hide(“fade”, fadeOption5);
$w(‘#image4’).show(“fade”, fadeOption6);
})
});
Looks pretty intense - difficult to read and to follow the timing logic.
Consider using setTimeout() Method and maybe setInterval() .
Brainstorrrm, thanks for the response. I agree with you – there’s surely a better way to accomplish this task. But . . .
It’s bugging me! Multiple show() works ok. Multiple hide() works ok. Why doesn’t multiple show() + hide() work correctly?
See it here: https://craig3598.wixsite.com/website//test-show-hide
Annotated code shown below – it’s a bit easier to understand.
// Simple animation using: show() + hide() with fadeOptions for timing
$w.onReady( function () {
// Bunch of fadeOptions used for timing
let fadeOption0 = {
“duration”: 0,
“delay”: 0
};
let fadeOption1 = {
“duration”: 0,
“delay”: 400
};
let fadeOption2 = {
“duration”: 0,
“delay”: 800
};
let fadeOption3 = {
“duration”: 0,
“delay”: 1200
};
let fadeOption4 = {
“duration”: 0,
“delay”: 1600
};
let fadeOption5 = {
“duration”: 0,
“delay”: 2000
};
let fadeOption6 = {
“duration”: 0,
“delay”: 2400
};
// Button 1 shows GIFs in sequence - this works fine
$w(‘#button1’).onClick((event) => {
$w(‘#image1’).show(“fade”, fadeOption1);
$w(‘#image2’).show(“fade”, fadeOption2);
$w(‘#image3’).show(“fade”, fadeOption3);
$w(‘#image4’).show(“fade”, fadeOption4);
})
// Button 2 hides GIFs in sequence - this works fine
$w(‘#button2’).onClick((event) => {
$w(‘#image1’).hide(“fade”, fadeOption1);
$w(‘#image2’).hide(“fade”, fadeOption2);
$w(‘#image3’).hide(“fade”, fadeOption3);
$w(‘#image4’).hide(“fade”, fadeOption4);
} )
// Button 3 shows and hides GIFs in sequence - THIS DOES NOT WORK
$w(‘#button3’).onClick((event) => { // show and hide each gif in sequence
$w(‘#image1’).show(“fade”, fadeOption0);
$w(‘#image1’).hide(“fade”, fadeOption1);
$w(‘#image2’).show(“fade”, fadeOption2);
$w(‘#image2’).hide(“fade”, fadeOption3);
$w(‘#image3’).show(“fade”, fadeOption4);
$w(‘#image3’).hide(“fade”, fadeOption5);
$w(‘#image4’).show(“fade”, fadeOption6);
})
});
Button 3:
It appears that you’re missing one more “hide” for image 4.
You command a “show” but not a “hide.”
When you click button 3, you command a SHOW which is immediately followed by a HIDE. The HIDE gets executed while the SHOW is still being processed (fading). My guess is that the HIDE routine fails because the SHOW routine is still busy doing as commanded and it maintains control of the image item long enough to make the HIDE routine fail/miss.
This is evident when you click button 3 a second time - since the images are all showing, the SHOW routine has no effect or finishes quickly enough, so that now the HIDE routines can fire and hide the images - except for #4, because you’re missing a command to hide it.
Try something like this (easier to read and manage):
setTimeout(function(){ $w('#image1').show(); }, 0); // show image1 after 0ms
setTimeout(function(){ $w('#image1').hide(); }, 400); // hide image1 after 400ms
setTimeout(function(){ $w('#image2').show(); }, 400); // show image2 after 400ms
setTimeout(function(){ $w('#image2').hide(); }, 800); // hide image2 after 800ms
setTimeout(function(){ $w('#image3').show(); }, 800); // show image3 after 800ms
setTimeout(function(){ $w('#image3').hide(); }, 1200); // hide image3 after 1200ms
setTimeout(function(){ $w('#image4').show(); }, 1200); // show image4 after 1200ms
setTimeout(function(){ $w('#image4').hide(); }, 1600); // hide image4 after 1600ms
Totally Awesome – thanks brainstorrrm! This works great.
I just put your setTimeout code inside
$w(‘#button4’).onClick((event) => {
})
I guess I’ll have to give up on using show() and hide(). I don’t understand what happens – and don’t think I’ll be finding out anytime soon.
See it here: https://craig3598.wixsite.com/website//test-show-hide
That’s odd? URL above isn’t loading page. Let’s try this:
craig3598.wixsite.com/website//test-show-hide