jQuery Scale Effect for Font-Size

Question

Can I use the jQuery Scale Effect (or something similar) to affect font-size in a span?

The demo appears to affect the size of a <div> but I'm not certain how to tweak it for my needs.

I have some text in a span:

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

and I have some CSS:

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

what I would like to do is write some JS, so that on some event (click event or whatever):

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

Can I do this with Scale or some other aspect of jQuery UI?

Answer 1

jQuery animate（）是一个为各种CSS属性提供动画的函数，你可以在这里看到更多列表

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

Answer 2

You can use animate() from Jquery:

 $('.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>