Increasing font-size over time

Question

$( "h1" ).hover(
    function(){
        for(var i=0;i<255;i++){

            setTimeout(function(){$("#fat").css("font-size", (i + 12) + "pt")},200);
        }
    }, function(){$("#fat").delay(200).css("font-size","12pt")}
    );

I want to increase the font-size of an Element over time, as long as the mouse is hovered over the text. Though what happens is, that the delay is counted down and then the biggest size is assumed for the Element instantly ( so no pretty growth effect).

I read in another thread (Here) something which is probably related but don't really understand how.

You could Probably call it like that. Just you hover over the Text and it grows by 1pt in size every 200ms till you take your mouse off of it and it gets back to 12pt instantly — lega, Apr 10 '14 at 18:04
why not use css3 transition property, http://jsfiddle.net/UW4SH/ — Bilal, Apr 10 '14 at 18:07
I just found this: http://jsfiddle.net/jquerybyexample/gAkvq/ but it doesn't seem to work for me — lega, Apr 10 '14 at 18:16
@Bilal, While css3 transitions are good, not all browsers support css3 so using javascript could used as a fallback. — Patrick Evans, Apr 10 '14 at 18:18
It's more of a personal experiment to see what can be done ;) just fiddling around. Got it to work just missed a ";" (oh my). That solutions works fine for me so I guess this is answered?! — lega, Apr 10 '14 at 18:25

Patrick Evans · Answer 1 · 2014-04-10T19:10:51.697

Dont bother with a for loop, do the logic in the anonymous function and use setInterval and clear the interval on hover out or when you have reached the limit

(function(){
   var timer = null;
   $("h1").hover(function(){
      timer = setInterval(function(){
         var ele = $("fat");
         var size = parseInt(ele.css("font-size"));
         if(size>=255){ 
            clearInterval(timer); 
            return;
         }
         ele.css("font-size",(size+1)+"pt"):
      },200);
   },function(){
      clearInterval(timer);
      $("#fat").delay(200).css("font-size","12pt");
   });
})();

Plus to correct the for loop you would have to use a closure and modify the timeout amount through each iteration, otherwise each increase would happen after 200 ms, and not increase once for every 200 ms.

score 0 · Answer 2 · answered Apr 10 '14 at 18:18

You can do this without any javascript, provided you're willing to set an upper bound on the size you'll allow the item to grow to:

h1 {
    transition: all 10s;
    font-size: 10pt;
}

h1:hover {
    font-size: 100pt;
}

Adjust timing and min/max size to taste.

(But note that animating font-size doesn't look wonderful, it gives you a 'stepped' appearance rather than a smooth zoom. you may be better off using transform: scale() or zoom().)

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Html

<h1 id="Ex">Some Content</h1>

Jquery

  $('#Ex').hover(function(){
  //  alert("here");
 for(var i=0;i<10;i++ )
 { 
   setTimeout(function() {
      $("#Ex").delay(2000).css({ zoom: i});
    }, 100);
 }  

});

$("#Ex").mouseout(function() {
$("#Ex").css({ zoom: 0});
});

Demo

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 10 '14 at 18:28

codefreaK

3,584
5
34
65

You should have a look at jQuery's `animate()` ;) – Maen Apr 10 '14 at 18:51

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Using jQuery

As an alternative to other answers provided, you could use jQuery animate() coupled with hover():

$('#zoomIt').hover(function(){
    $(this).animate({"font-size":"4em"}, 1000); //On mouse on
}, function(){
    $(this).animate({"font-size":"2em"}, 1000); //On mouse out
});

Demo

Using CSS

I prefer the approach of CSS transitions though :

h1 {
    transition: font-size 3s ease-in-out;
    font-size: 2em;
}
h1:hover {
    font-size: 4em;
}

Increasing font-size over time

4 Answers4

Html

Jquery

Using jQuery

Using CSS