Lezione #id-jd-2013-0012#
JQuery animate() ci permette di animare i parametri CSS del nostro documento HTML!
Con JQuery animate() possiamo animare quasi tutti i parametri CSS seguendo la seguente regola: tutti i nomi delle proprietà devono essere scritte con notazione camel-cased (notazione a cammello), quindi invece di padding-left scriveremo paddingLeft.
Prima di tutto la sintassi:
$(selettore).animate({parametri},velocità,callback);
In particolare il parametro – velocità – può essere espresso in “slow”, “fast” o millisecondi (1000=1 secondo)
Qualche esempio pratico:
Animare più parametri contemporaneamente
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Avvia Animazione</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Animare più parametri in una sequenza stabilita
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Avvia Animazione</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Il contenuto del divisorio</div>
</body>
</html>
Animare utilizzando valori relativi
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'-=20px'
});
});
});
</script>
</head>
<body>
<button>Avvia Animazione</button>
<div style="background:#98bf21;height:200px;width:200px;position:absolute;"></div>
</body>
</html>
In particolare esaminiamo:
height:'+=150px',
width:'-=20px'
height:’+=150px’ aggiunge al parametro attuale 150 px
width:’-=50px’ toglie al parametro attuale 50 px
Ogni volta che premerò il bottone “Avvia Animazione” avremo l’applicazione di una nuova modifica relativa al valore attuale.
Utilizzare valori predefiniti show-hide-toggle
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Avvia Animazione</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Mettiamo in pratica quanto abbiamo imparato:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("box1").animate({
right:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("#button2").click(function(){
var box2=$("box2");
box2.animate({right:'250px'},"slow");
box2.animate({fontSize:'3em'},"slow");
});
$("#button3").click(function(){
$("box3").animate({
height:'-=20px',
width:'+=70px'
});
});
$("#button4").click(function(){
$("box4").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<p>
Vediamo i vari tipi di animazioni che si possono ottenere con il metodo JQuery animate()
</p>
<p>
<button id="button1">Animazione di più parametri contemporaneamente</button><br>
<box1 id="div1"style="background:#98bf21;height:100px;width:100px;position:absolute;">Lorem ipsum dolor sit amet.</box1>
</p>
<br><br><br><br>
<p>
<button id="button2">Animazione di più parametri in una sequenza prestabilita</button><br>
<box2 style="background:#98bf21;height:100px;width:100px;position:absolute;">Lorem ipsum dolor sit amet.</box2>
</p>
<br><br><br><br>
<p>
<button id="button3">Animazione con valori relativi</button><br>
<box3 style="background:#98bf21;height:100px;width:100px;position:absolute;">Lorem ipsum dolor sit amet.</box3>
</p>
<br><br><br><br>
<p>
<button id="button4">Animazione con valori predefiniti toggle</button><br>
<box4 style="background:#98bf21;height:100px;width:100px;position:absolute;">Lorem ipsum dolor sit amet.</box4>
</p>
</body>
</html>
