字體大小的jQuery縮放效果

Question

我可以使用jQuery Scale Effect（或類似的東西）來影響范圍中的字體大小嗎？

該演示似乎會影響<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的其他方面嗎？

Answer 1

jQuery animate（）是一個為各種CSS屬性提供動畫的函數，你可以在這里看到更多列表

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

Answer 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>