Uno de los aspectos más potentes de jQuery es el que se refiere a las animaciones, con este fantástico framework podemos generar increíbles animaciones con apenas unas líneas de código.
Un muy buen ejemplo de ello es el pseudo sistema de votación que crearon en Superdit, que utiliza la función animate para animar el voto en una encuesta común y corriente. Y si bien el sistema dista mucho de ser completamente funcional da el puntapié inicial para crear uno completo con un poco más de trabajo.
El sistema en funcionamiento se ve de la siguiente forma:
Y el código necesario para lograr dicho funcionamiento es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Simple Vote</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#container div a").click(function() {
$(this).parent().animate({
width: '+=100px'
}, 500);
$(this).prev().html(parseInt($(this).prev().html()) + 1);
return false;
});
});
</script>
<style type="text/css">
* {
font-family: Arial, "Free Sans";
}
#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;
}
#container div {
font-weight: bold;
letter-spacing: -3px;
background: #0099cc;
margin-bottom: 15px;
padding: 10px;
font-size: 34px;
color: #ffffff;
border-left: 20px solid #333;
width: 400px;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0 0.5em 0.5em 0;
border-radius: 0 1.5em 1.5em 0;
}
#container div a {
border-radius: 0.3em;
text-decoration: none;
color: #0099cc;
padding: 5px 15px;
background: #333;
margin: 0 20px;
}
#container div a:hover {
color: #fff;
}
body {
margin: 0;
padding: 0;
background: #ffffff url('trentanove.gif') repeat right top;
}
</style>
</head>
<body>
<div id="container">
<span id="question">What is your favorite server side language?</span>
<div><span>0</span><a href="">Vote</a>PHP</div>
<div><span>0</span><a href="">Vote</a>Ruby</div>
<div><span>0</span><a href="">Vote</a>Java</div>
<div><span>0</span><a href="">Vote</a>ASP</div>
<div><span>0</span><a href="">Vote</a>Perl</div>
<div><span>0</span><a href="">Vote</a>ColdFusion</div>
</div>
</body>
</html>
Obviamente quedan grandes detalles fuera de esta implementación. El más importante es que no se guarda en ningún lado el voto ingresado, no obstante podemos lograr esta tarea utilizando un poco de PHP + MySQL.
Web: Superdit