我正在使用我在另一个线程中找到的一个小函数,它可以计算出 div 中文本的宽度,这很好用。我也可以为给定的宽度设置动画,但是当我在为字体大小设置动画后尝试为宽度设置动画时,我遇到了问题。
我已经发现它将新宽度设置为调整字体大小之前的宽度,但无法弄清楚如何在一个平滑的回调中全部工作。
请参阅下面的基本小提琴,您可以在其中分别运行 increaseFont 和 increaseWidth 并获得正确的结果。但是同时运行两者并不起作用。请reset
在每次测试之间按。
我正在使用我在另一个线程中找到的一个小函数,它可以计算出 div 中文本的宽度,这很好用。我也可以为给定的宽度设置动画,但是当我在为字体大小设置动画后尝试为宽度设置动画时,我遇到了问题。
我已经发现它将新宽度设置为调整字体大小之前的宽度,但无法弄清楚如何在一个平滑的回调中全部工作。
请参阅下面的基本小提琴,您可以在其中分别运行 increaseFont 和 increaseWidth 并获得正确的结果。但是同时运行两者并不起作用。请reset
在每次测试之间按。
由于一切都是异步发生的,因此$('.text').textWidth()
在动画执行期间不会返回实际大小。尝试“完成”选项并使用回调函数解决问题:http:
//docs.jquery.com/Effects/animate#toptions
我所做的几乎就是在您的函数中添加了一个参数以获取字体大小。并计算它的宽度。
$.fn.textWidth = function(fontSize){
var html_org = $(this).html();
var html_calc = '<span style="font-size:'+fontSize+'">' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
在这里你会看到你的 jsfiddle 更新了: