随时间增加字体大小答案

【问题标题】：Increasing font-size over time随时间增加字体大小
【发布时间】：2014-04-10 17:59:31
【问题描述】：

$( "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) 中读到了一些可能相关但并不真正理解的内容。

【问题讨论】：

你要制作缩放效果吗
你可以这样称呼它。只需将鼠标悬停在文本上，它每 200 毫秒就会增长 1pt，直到你将鼠标移开它并立即恢复到 12pt
为什么不用css3过渡属性，jsfiddle.net/UW4SH
@Bilal，太棒了
我刚刚发现了这个：jsfiddle.net/jquerybyexample/gAkvq，但它似乎对我不起作用

标签： javascript jquery html css

【解决方案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 毫秒增加一次。

【讨论】：

【解决方案2】：

使用 jQuery

作为提供的其他答案的替代方案，您可以使用 jQuery animate() 加上 hover()：

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

Demo

使用 CSS

我更喜欢 CSS 过渡的方法：

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

【讨论】：

【解决方案3】：

如果您愿意设置允许项目增长到的大小上限，则无需任何 javascript 即可执行此操作：

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

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

根据口味调整时间和最小/最大尺寸。

（但请注意，动画字体大小看起来并不美妙，它会给您一个“阶梯式”外观而不是平滑缩放。您最好使用transform: scale() 或zoom()。）

【讨论】：

【解决方案4】：

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

【讨论】：

你应该看看 jQuery 的 animate() ;)