jQuery Tip: Font Resizing With Animation Effects
Friday, January 16th, 2009
Hey everyone. Sorry for not having a new tip published yesterday, I was feeling under the weather. Seeing how popular the original font resizing with jQuery article was, I thought it would be nice to spice up our original script with a little animation. This is extremely easy to do with jQuerys built in animation functions.
The Original Script
$(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);
});
});
Achieving the Animation Effect
Instead of instantly resizing the text upon click, we want the text to re size over a specified amount of milliseconds. We can still use our original script but we will replace the last section from the css() method to the animate() method.
Our New Script
Here is our new script complete 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.animate({fontSize: finalNum + stringEnding},600);
});
});
Quite simple isn't it? Get creative and add your own touch or animations to your jQuery effects.
View the Demo
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!
Article Sponsored by:
Looking to become a WordPress rockstar? Theme like a pro with this straight forward tutorial-style guide to WordPress theming, that takes you from the basics to the advanced!
ABOUT THIS AUTHOR
22 Comments
subscribe comments feedTrackbacks/Pingbacks
Leave a Reply
Popular Series
Related Posts
Great tutorial! Definitely a unique animation effect that could be used in very cool ways
Thanks Brian!
how did you make this website..? drupal or wordpress?
@Nahid-Wordpress all the way
Amen Brudda!
And on the article – damn I love jQuery so much lol Thx for the tut
Hey cool plugin, could this be intergrated with a cookie? i mean if someone with bad eyesight was usring this, this would be pretty useless if they navigated to the next page and had to click that button 10 times to read!!
=p
Hey Tom,
It is actually not really considered a plugin but no worries. And yes, setting a cookie would be a fantastic idea to remember the users preference. I’ll see if I can’t squeeze some time in and write a new post on how to do this. Thanks for your suggestion and comment!
-Drew
Great script, i have a question:
How can i limit font resize?
Hi!! awesome script and thanks for sharing this with us man.. cheers…
I was wonder, is that possible to set a maximum font size to this?
Please help, thanks!!
Thanks very much for your great blog.
ауу модер что за бред здесь в коментариях)
Great script, but is there any way to resize the line height as well as the font size? I have a project that has client-generated code with a million little p tags, all with their own defined line heights and font sizes. This code overrides the font-size perfectly, but not the line height. Any ideas?
Nevermind, I got it.
You just add this under the first code:
$('input').click(function(){
var ourText = $('p');
var currLineHeight = ourText.css('lineHeight');
var finalNum = parseFloat(currLineHeight, 10);
var stringEnding = currLineHeight.slice(-2);
if(this.id == 'large') {
finalNum *= 1.2;
}
else if (this.id == 'small'){
finalNum /=1.2;
}
ourText.animate({lineHeight: finalNum + stringEnding},300);
});
});
Every thing is nice but Perhaps You have miss the resizing option
finally i find this tutorial… but, how to make normal size button.
Just add another input button with a unique id. When that button is pushed, just use jQuery to set the css font size back to whatever you want. Shouldn’t be more difficult than a simple call to the css method.
How can we use same script with tag instead of or additional to tag?
thank for tips. and concept change fontsize.
Thanks Rob! jQuery certainly does rock