Problem with fading animation

@yisrael-wix @mrtobor Too much fun that I’m wonking out! (-_-)"

Thank you both for your advice, however, as much as I tried to make sense of both sets of answers, I’m very limited in my understanding of coding. To that effect, I have tried a few variations but all yielded similar effects - i.e. when I clicked once, Quote#1 disappears, before reappearing for a split second just before Quote#2 fades in …

Also, at times, random quotes may appear even before I click on the strip column.

My current coding :

import wixData from 'wix-data';

export function columnStrip4_click_1(event) {
 
 // clear any filters in the dataset
    $w("#dataset1").setFilter(wixData.filter());

 // get size of collection that is connected to the dataset
 let count = $w("#dataset1").getTotalCount();

 // get random number using the size as the maximum
 let idx = Math.floor(Math.random() * count);

 // set the current item index of the dataset
    $w("#dataset1").setCurrentItemIndex(idx);
 
 
let fadeOptions = {
 "duration":   1200,
 "delay":      0
};

$w("#group1").hide()
  .then( ( ) => {
    console.log("Done with hide");
    $w("#group1").show("fade", fadeOptions);
} );


}

Sincerely hope to resolve this coz its 4 days now since I’m stuck here… cries