L'effetto shake sugli elementi fu originariamente introdotto dalla libreria Scriptaculuous e quindi ripreso da jQuery UI. Vari sono i campi di applicazione, ma sicuramente uno dei più efficaci è quello dei menu di navigazione. Vediamo insieme i dettagli.
Innanzitutto dobbiamo inserire prima jQuery e poi jQuery UI nella nostra pagina:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
<!--codice qui-->
</script>
Quindi decidiamo di applicare l'effetto shake al passaggio del mouse sui link di un menu di navigazione:
$(document).ready(function() {
$('li', document.getElementById('navigation')).each(function() {
var $li = $(this);
var $a = $('a', $li);
$a.mouseover(function() {
$a.stop(true, true).effect('shake', {times: 2, distance: 5}, 300);
});
});
});
shake fa parte dell'oggetto effect di jQuery UI. Possiamo specificare il numero di volte in cui l'effetto verrà ripetuto, la distanza dell'effetto (in pixel), la velocità ed anche la direzione del movimento.
Potete visionare l'esempio finale in questa pagina.