Question

I’m using a small function I found in another thread that works out the width of the text in a div, this works great. I can also animate to the given width, but when I try to animate the width after I have animated the font size, I have issues.

I’ve figured out it’s animating the new width to the width before the font-size is adjusted but can’t figure out how to get to work all in one smooth callback.

Please see the basic below fiddle, in which you can run increaseFont and then increaseWidth separately and get the right result. But run bothTogether and it doesn’t work. Please press reset between each test.

http://jsfiddle.net/b9uQp/

Answer 1

pretty much what i did was added a parameter to your function to take in a font size. and calculate the width of that.

$.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;
};

here you will see your jsfiddle updated:

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