Corsi on-line

Arrestare un processo di jQuery

Uno degli utilizzi più frequenti del framework JavaScript jQuery riguarda la realizzazione di effetti per l’animazione degli elementi di pagina, tali interventi possono influire, per esempio, sul comportamento di uno slider oppure determinare il funzionamento di una transizione; esattamente come possono essere attivati, gli effetti adottati possono anche essere bloccati prima della fine della loro esecuzione, restituendo un’istantanea dello stato di un’animazione nel momento corrente.

Questo risultato potrà essere ottenuto grazie all’impiego di un apposito metodo, stop(), il cui compito è in pratica quello di impedire il proseguimento di un’animazione o di un effetto prima che quest’ultimo concluda il suo ciclo di esecuzione; esso potrà essere applicato a qualsiasi funzione jQuery sia in grado di determinare la mutazione di un elemento in fase di rendering; a tal scopo sono stati già citati sliding e animations, ma ci si potrebbe riferire anche al fading.

Il semplice esempio seguente mostra come sia possibile realizzare un pulsante che attraverso jQuery permetta di arrestare uno slider in discesa; l’attivazione dello slider non sarà automatica ma determinata da un input utente, il semplice click sulla voce “Attiva lo slider”:

<!DOCTYPE html>
<html>
<head>
<title>Il metodo stop() di jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#effetto").click(function(){
$("#banner").slideDown(4000);
});
$("#pulsante_di_arresto").click(function(){
$("#banner").stop();
});
});
</script>

<style>
#content {
width: 500px ;
margin-left: auto ;
margin-right: auto ;
}

#banner, #effetto {
padding: 10px;
font-size: 24px;
text-align: center;
background-color: #ccc;
color: black;
border: dashed 1px #ddd;
border-radius: 5px;
}

#banner {
padding: 100px;
display: none;
}
</style>
</head>
<body>
<div id="content">
<button id="pulsante_di_arresto">Arresta lo slider</button>
<div id="effetto">Attiva lo slider</div>
<div id="banner">Blah! Blah! Blah!</div>
</div>
</body>
</html>

In pratica, clickando su “Attiva lo slider” lo slider inizierà ad occupare una porzione via via sempre maggiore della pagina dalla quale quale è stato inizializzato e, in assenza di un’indicazione contraria, l’animazione proseguirà fino all’ottenimento di un risultato come il seguente:Immagine1

Clickando però sul pulsante “Arresta lo slider” verrà invocato il metodo stop() e questa azione determinerà l’arresto dello sliding in coincidenza con lo stato dell’animazione al momento di tale evento:Immagine2

Come è semplice notare le impostazioni personalizzabili dello script sono diverse, è utile però segnalare l’utilizzo del metodo slideDown() che permetterà di definire la velocità di espansione dello slider verso il basso come parametro espresso in millisecondi, “4000” nel caso del nostro esempio; il valore di default è invece 400.

Post correlati
I più letti del mese
Tematiche