javascript - 随着时间的推移增加字体大小

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")}
    );

我想随着时间的推移增加元素的字体大小，只要鼠标悬停在文本上即可。尽管发生的情况是，延迟被倒计时，然后立即为元素假定最大尺寸(因此没有很好的增长效果)。

我在另一个线程 ( Here ) 中读到一些可能相关但不太了解如何相关的内容。

Answer 1

不要为 for 循环而烦恼，在匿名函数中执行逻辑并使用 setInterval 并在悬停或达到限制时清除间隔

(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");
   });
})();

此外，要更正 for 循环，您必须使用闭包并在每次迭代中修改超时量，否则每次增加都会在 200 毫秒后发生，而不是每 200 毫秒增加一次。