immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Animazioni con jQuery in un sistema di votazione

di MaiNick | 7 Set 2011 | jQuery | 3 Commenti

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

<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>

Foglio di stile 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;
}

Effetti con jQuery

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

$(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;
  });
});

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

Tags: ,

3 Commenti

  1. Riktar ha detto:

    Ottimo tutorial 🙂

  2. Valentin ha detto:

    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)

Trackbacks

Lascia un Commento

^ Torna su