字体大小的 jQuery 缩放效果答案

【问题标题】：jQuery Scale Effect for Font-Size字体大小的 jQuery 缩放效果
【发布时间】：2016-06-09 21:40:03
【问题描述】：

我可以使用 jQuery 缩放效果（或类似的东西）来影响跨度中的字体大小吗？

演示似乎会影响<div> 的大小，但我不确定如何根据需要对其进行调整。

我在一个跨度中有一些文本：

<span class="banner"> <a href="#" >Click here now</a> </span>

我有一些 CSS：

.banner { display: none; font-size: 0.05em; }

我想做的是写一些 JS，以便在某些事件（点击事件或其他）上：

$(".some-button").click(function () {
     var elements = $(".banner");
     elements.css("display", "inherit");

     // and scale the font-size from 0.05em => 1.0em
     // over some timespan (400ms)...
});

我可以使用 Scale 或 jQuery UI 的其他方面来做到这一点吗？

【问题讨论】：

“我想做的是写一些 JS”...那你为什么不呢？我不确定你的问题是什么。
@Paulie_D 我在问如何使用 jQuery 或 jQuery UI 缩放字体大小。谢谢！

标签： javascript jquery css jquery-ui

【解决方案1】：

jQuery animate() 是一个在各种 CSS 属性上提供动画的函数，您可以查看更多列表here

$(".banner").animate({fontSize: '1em'}, 400);

【讨论】：

【解决方案2】：

您可以使用来自 Jquery 的animate()：

$('.btn').click(function(){
  $('.banner').show().animate({'font-size':'3em'},1000)
})

.banner {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn">ClickMe</a>
<br>
<span class="banner"> <a href="#" >Click here now</a> </span>

【讨论】：