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

我希望随着时间的推移增加Element的字体大小，只要鼠标悬停在文本上。虽然发生的是，延迟倒计时，然后立即假设元素的最大尺寸（因此没有相当大的增长效果）。

我在另一个帖子（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 ms后发生，而不会每200 ms增加一次。

Answer 2

您可以在没有任何javascript的情况下执行此操作，前提是您愿意设置允许项目增长到的大小的上限：

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

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

调整时间和最小/最大尺寸。

（但请注意，动画字体大小看起来并不精彩，它会为您提供“阶梯式”外观，而不是平滑缩放。您可能最好使用transform: scale()或zoom()。）

Answer 3

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

Answer 4

使用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;
}

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

4 个答案:

HTML

Jquery的

使用jQuery

使用CSS