jquery - 使用jquery设置跨度的字体大小，而不移动其余行

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

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

我下面的代码“刺激”心脏，使心脏动画以增加其大小并在以后减小：

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

问题在于，当我对其进行动画处理时，其余部分会移动。我相信这是因为跨度字体大小增加时，最大行高也会发生变化。

我可以制作此动画而无需移动其余行，即不更改最大行高吗？

最佳答案

您还可以为段落标记设置线高动画。在这个小提琴中，我在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'});

关于jquery - 使用jquery设置跨度的字体大小，而不移动其余行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20011256/