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属性提供动画的函数，你可以看到更多列表here

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

字体大小的jQuery缩放效果

2 个答案: