jquery - 使用 jquery 在不移动行的其余部分的情况下为跨度的字体大小设置动画

Question

我有一个简单的行，它使用 bootstrap 的类 .glyphicon-heart 在文本中间放置一个心:

<p>Some text <span class="glyphicon-heart"></span></p>

我下面的代码使心脏“跳动”，为它设置动画以增加其大小，然后再缩小:

$('.glyphicon-heart').animate({fontSize: '200%'}).animate({fontSize: '100%'});

问题是当我为它设置动画时，线条的其余部分会移动。我相信这是因为当跨度字体大小增加时最大行高会发生变化。

我可以在不移动其余行的情况下制作此动画吗，即不更改最大行高？

Answer 1

您还可以为段落标记设置行高动画。在这个 fiddle 中，我向 p 标签添加了一个 20px 的行高，因此请将其更改为您的任何值。我动画到 0px 然后回到 20px；

http://jsfiddle.net/z9BMF/

<p style="line-height:20px;line-height:20px;">Some text <span class="glyphicon-heart">LARGER</span></p>

$('.glyphicon-heart').animate({fontSize: '200%', lineHeight: '0px'}).animate({fontSize: '100%', lineHeight:'20px'});