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

Question

我有一个简单的行，它使用引导程序的类.glyphicon-heart将一颗心放在文本的中间：

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

我的下面的代码“脉冲”了心脏，动画它以增加它的大小并在以后减少：

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

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

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

Answer 1

您还可以为段落标记的行高设置动画，以便与其一起使用。在这个小提琴中，我在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'});