Истоник: jQuery Tip: Font Resizing With Animation Effects

Возьмем за основу вот этот код:

$(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 == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

и добавим к нему возможность увеличивать текст с эффектом анимации.

Вместо того чтобы увеличивать текст сразу по клику, мы сделаем, чтобы это происходило в течение нескольких миллисекунд. Мы можем использовать оригинальный скрипт, но заменим последнюю секцию с методом css() на animate().

И вот что получилось:

$(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 == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.animate({fontSize: finalNum + stringEnding},600);
		});
	});

Посмотрите демо, как это работает.

Популярность: 82%