jQuery: Plugin per muovere un div in modo animato
Link sponsorizzati
Un plugin che trovo molto interessante per jQuery è Flip!. Quest’ultimo permette di animare un div in vari modi. La funzione flip è facile da usare, le opzioni sono le seguenti:
- content: Definisce il contenuto del div, funziona sia con testo che con html
- direction: Definisce la direzione di rotazione ‘tb’, ‘bt’, ‘lr’ o ‘rl’, che stanno rispettivamente per TopBottom, BottomTop, LefRight, RightLeft
- bgColor: Sfondo del div quando inizia l’animazione
- color: Sflondo del div quando finisce
- speed: Velocità dell’animazione
- onBefore: Funzione che viene eseguita prima che parta l’animazione
- onAnimation: Funzione che viene eseguita durante l’animazione
- onEnd: Funzione che viene eseguita alla fine dell’animazione
Questo è un esempio funzionante molto semplice!
Link sponsorizzati
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// carica jQuery
google.load("jquery", "1");
</script>
<script type="text/javascript" src="http://lab.smashup.it/flip/js/jquery-ui-personalized-1.6rc6.min.js"></script><!-- Carica jQuery UI -->
<script type="text/javascript" src="http://lab.smashup.it/flip/js/jquery.flip-compressed.js"></script><!-- carica il plugin Flip! -->
<style type="text/css">
#flipBox {
width: 500px;
height: 200px;
margin: 0 auto;
background-color: #83870E;
color: #fff;
font-weight: bold;
font-size: 24px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#fli").click(function(){
$("#flipBox").flip({
direction: 'tb',
bgColor: '#000000',
color: '#B34212',
content: "Questo è il contenuto modificato",
onBefore: function() { alert("Tra poco parte l'animazione"); },
onEnd: function() { alert("Animazione finita"); }
});
});
});
</script>
</head>
<body>
<p style="text-align:center;"><a id="fli" href="#">Prova</a></p>
<div id="flipBox">
<div>Questo è il contenuto di partenza del div</div>
</div>
</body>
</html>
La parte interessante ovviamente è questa:
$("#fli").click(function(){
$("#flipBox").flip({
direction: 'tb',
bgColor: '#000000',
color: '#B34212',
content: "Questo è il contenuto modificato",
onBefore: function() { alert("Tra poco parte l'animazione"); },
onEnd: function() { alert("Animazione finita"); }
});
});
});
Il resto è contorno. Come vedete, non ho fatto nient’altro che usare le opzioni spiegate in precedenza e associare il movimento al click di un link.
In questo caso ho caricato le librerie JavaScript direttamente dai siti interent che le ospitavano (jQuery, jQuery UI e il plugin in questione), lo sconsiglio però se decidete di utilizzarlo, la pagina è più lenta, metteteli direttamente nel vostro sito. Un esempio completo sta anche nel sito linkato all’inizio.
Come detto le dipendenze del plugin sono, oltre a jQuery (ovviamente) anche jQuery UI.
Link sponsorizzati
