Corsi on-line

Il metodo .fadeToggle() in jQuery 1.4.4

In un precedente post abbiamo presentato una panoramica delle nuove caratteristiche associate a jQuery 1.4.4, .fadeToggle() è l’unico nuovo metodo introdotto tramite questa release, esso ha la funzione di mostrare o nascondere i relativi elementi con un effetto di opacità animata. Utilizzare questo metodo è relativamente semplice, si analizzi per esempio il seguente esempio pubblicato sulla guida ufficiale delle API di jQuery:

<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>

<script>
$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
  $("p:last").fadeToggle("fast", function () {
    $("#log").append("<div>finished</div>");
  });
});
</script>

Quando .fadeToggle() viene chiamato per un elemento visibile, la proprietà di stile display viene settata su none nel momento in cui l’opacità raggiunge il livello “0”, in questo modo la visibilità della pagina non risulterà alterata; la durata dell’effetto viene definita in millisecondi, è possibile però utilizzare gli attributi fast e slow che corrispondono rispettivamente a “200” e “600” millisecondi.

Post correlati
I più letti del mese
Tematiche