jQuery: effetti periodici utilizzando timer casuali

  • jQuery
  • Gabriele Romanato

In questo articolo combineremo i timer JavaScript con un range di intervalli pseudo-casuali e utilizzeremo jQuery per gestire gli effetti da applicare agli elementi utilizzando questa combinazione. Vediamo insieme i dettagli.

Il codice รจ il seguente:


function randRange(data) {
       var newTime = data[Math.floor(data.length * Math.random())];
       return newTime;
}

function toggleElement() {
    
       var timeArray = new Array(200, 300, 150, 250, 2000, 3000, 1000, 1500);

       
       $("#box").toggleClass("visible");

       clearInterval(timer);
       timer = setInterval(toggleElement, randRange(timeArray));
}

var timer = setInterval(toggleElement, 1000);

Estraiamo un elemento pseudo-casuale dall'array di intervalli di tempo e lo utilizziamo con il nostro timer. In questo caso jQuery non fa altro che aggiungere o rimuovere una classe CSS dall'elemento.

Potete visionare l'esempio finale in questa pagina.

Torna su