Simple Animation with Show Hide

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);
})
});