jQuery

Animazioni con jQuery in un sistema di votazione

Ho pensato di utilizzare il metodo animate() di jQuery per realizzare un sistema di votazione semplice ma bello da vedere.

L’idea è quella di animare un div espandendolo ad ogni voto ricevuto, tramite la funzione animate, aggiungendo un stesso valore alla proprietà di lunghezza del div stesso.

Documento html

[html]
<div id="container">
<span id="question">Quale di questi framework PHP utilizzi?</span>
<div><span>0</span><a href="">Vota</a>Zend Framework</div>
<div><span>0</span><a href="">Vota</a>Symfony</div>
<div><span>0</span><a href="">Vota</a>CakePHP</div>
<div><span>0</span><a href="">Vota</a>CodeIgniter</div>
<div><span>0</span><a href="">Vota</a>Kohana</div>
<div><span>0</span><a href="">Vota</a>YII framework</div>
</div>
[/html]

Foglio di stile CSS

[css]
* {
font-family: Arial, "Free Sans";
}
body {
margin: 0;
padding: 0;
}
#container {
margin-top: 20px;
color: #fff;
}
#container #question {
display: block;
padding: 20px;
font-weight: bold;
letter-spacing: -3px;
margin-bottom: 20px;
padding: 10px;
font-size: 40px;
color: #333;
}
#container div {
font-weight: bold;
letter-spacing: -3px;
background: #c00;
margin-bottom: 15px;
padding: 10px;
font-size: 34px;
color: #ffffff;
border-left: 20px solid #333;
width: 400px;
}
#container div a {
border: 1px solid #40392C;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-decoration: none;
color: #0BBFEC;
padding: 5px 15px;
background: #2F2F2F;
margin: 0 20px;
}
#container div a:hover {
color: #fff;
}
[/css]

Effetti con jQuery

Non dimentichiamoci di includere la libreria jQuery nell’intestazione head del documento, poi colleghiamo lo script che permette l’animazione:

[js]
$(document).ready(function() {
$("#container div a").click(function() {
$(this).parent("div").animate({ width: ‘+=30px’ }, 500);
$(this).prev("span").html(parseInt($(this).prev().html()) + 1);
return false;
});
});
[/js]

Come potete vedere è tutto molto semplice 😉

Associamo una funzione all’evento click sul numero di voti: prendiamo il nodo/oggetto padre del link e sudi esso chiamiamo il metodo animate che genera l’animazione di allungamento in un tempo di 500 millisecondi, dunque incrementiamo il numero di voti.

Demo Download

You might also like

  • Ottimo tutorial 🙂

    7 Settembre 2011
  • Davvero fico

    7 Settembre 2011
  • My brother recommended I might like this web site. He was totally right.
    This ost truly made my day. You cann’t imagine simply how much
    time I had spent for this information! Thanks!

    Takee a look aat my webpage: baqlance (Valentin)

    7 Settembre 2011

LEAVE A REPLY

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.