CSS/JS: Animate Inline Element Upon Text Change

Question

When an inline element\'s text changes, it is usually the case that its computed width or height changes as well.

Usually it\'

Answer 1

I suppose that you will need two elements to achieve this elegantly:

$(".inner").on("click", function() {
  var $this = $(this);
  var $par = $this.parent();
  $par.css({
    width: $par.width()
  });

  $this.text("New text");

  $par.css({
    width: $this.outerWidth()
  });

});

.inner {
  display: inline-block;
  padding: 8px 16px;
  white-space: nowrap;
}

.outer {
  display: inline-block;
  transition: width 300ms ease-in-out;
  background-color: red;
  overflow: hidden;
}

  
Here's some text.