Возьмем за основу вот этот код:
Code
$(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().
И вот что получилось:
Code
$(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);
});
});
Посмотрите демо, как это работает.
Источник: www.flora.org.ru
Главная 
