En "jQuery Tip: Font Resizing With Animation Effects" nos muestran como redimensionar el tamaño del texto con un ligero efecto de animación. La función para realizar esto es:
<script language="javascript">
$(function(){
$('input').click(function(){
var ourText = $('p');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'grande') {
finalNum *= 1.4;
}
else if (this.id == 'pequenyo'){
finalNum /=1.4;
}
ourText.animate({fontSize: finalNum + stringEnding},1000);
});
});
Hay que tener en cuenta que la función se invoca cuando se hace click sobre un input y que la función evalúa el id del mismo para saber si es 'grande' o 'pequenyo' y desencadenar las acciones pertinentes, por lo que en nuestro HTML deberemos tener dos botones uno con id 'grande' y otro con id 'pequenyo'.
<input type='button' value='Texto Grande' id='grande' /> <input type='button' value='Texto Pequeño' id='pequenyo' />
El script es muy sencillo y lo podríamos personalizar para que se invocase al hacer click sobre un texto o imágenes en vez de sobre un input; personalizar el ámbito de actuación a un determinado párrafo o div; etc.