Question

我正在使用我在另一个thread中找到的一个小函数来计算div中文本的宽度，这很有效。我也可以动画到给定的宽度，但是当我在设置动画字体大小后尝试设置宽度动画时，我遇到了问题。

我已经发现它在调整字体大小之前将新宽度设置为宽度动画，但无法弄清楚如何在一个平滑的回调中完成所有工作。

请参阅下面的基本小提琴，您可以在其中运行increaseFont然后再单独增加宽度并获得正确的结果。但是同时运行并且它不起作用。请在每次测试之间按reset。

Answer 1

由于一切都是异步发生的，$('.text').textWidth()在动画执行期间没有返回实际大小。尝试'完整'选项并使用回调函数解决问题： http://docs.jquery.com/Effects/animate#toptions

Answer 2

我所做的几乎是为你的函数添加了一个参数来获取字体大小。并计算其宽度。

$.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更新：

http://jsfiddle.net/Morlock0821/b9uQp/5/

在'font-size'动画后动画到textWidth

2 个答案: