jQuery: effetti

Proviamo alcuni effetti contenuti nella nota libreria jQuery UI.

Come prima cosa prepariamo nell’html della pagina un bottone e un elemento sul quale applicare il nostro effetto:

<a href=”#” id=”button”  class=”ui-state-default ui-corner-all”>Run Effect</a>
<div id=”effect”  class=”ui-widget-content ui-corner-all”>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.</p>
</div>

Come si può notare  sia al link sia al div sono state applicate delle classi standard dei temi di jQuery UI per ottenere degli effetti un po’ più gradevoli dove questi sono supportati.

Lo stile è essenziale e nemmeno troppo significativo nel nostro esempio:

<style>
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; }
</style>

Mentre da non trascurare è l’inclusione del tema e delle librerie nell’head della nostra pagina:

<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script>
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>

Quindi al caricamento dell’html possiamo mappare l’evento click sul link e lanciare l’animazione:

$(document).ready(function(){
$(“#button”).click(function() {
$(“#effect”)
…
})
});

L’animazione userà il metodo animate() di jQuery esteso da effetti presenti in jQuery UI:

.animate({height: “hide”}, 1500, “easeOutBounce”)

easeOutBounce mi serve per dare l’effetto “rimbalzo”

A questo punto aspettimao un momento prima di srotolare nuovemnte il nostro div:

.delay( 800 )
.animate({height: “show”}, 1500, “easeOutBounce”)

L’esempio