JQuery possiede una particolare funzione che consente di fare animazioni su più proprietà contemporaneamente.
Uso:
.animate({param1: 'value1', param2: 'value2'}, speed, function() {
alert('The animation is finished.');
});
Parametri:
Se volessi ricreare l'effetto 'read more' utilizzando questo metodo potrei scrivere:
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function() {
$('p:eq(1)'). animate({height: 'show', width: 'show', opacity: 'show'}, 'slow');
$(this).hide();
});
});
Es. Animate sample
Ma le cose possono essere portate un passo più in là. Posso agire anche su altre propà: potrei voler cambiare la posizione e le dimensioni degli elementi. Far ingrandire i bottone quando ci passo sopra col mouse per esempio:
$(document).ready(function() {
$('div.button').mouseover(function() {
$(this).animate({width:200, height:200}, 'slow');
});
$('div.button').mouseout(function() {
$(this).animate({width:100, height:100}, 'slow');
});
});