javascript - How can i animate this jquery style change, New problem facing

Question

Here is a jquery script that auto font size change according to #inner div width and height, that is working correctly by changing it's width and height from jquery by changing it's new style class that is #inner.newouter But now i want animation here form smooth effect.

But problem is that when i add CSS transaction to class then my js auto font size change not work, i also tried jquery animation this $("#inner").animate({height: "300px"}); but still it is not working, can i know what mistake am making.

Plz solve it.

My Whole code is here:

$.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 100; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}



$('#inner').fitInText();



//Jquery for change outer div width
$('.newsize').on('click', function() {
    $('#inner').toggleClass('newouter');
});

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
    width: 700px;
   height: 300px;
word-break: normal
}


#inner.newouter {
  display: table;
  width: 900px;
   height: 500px;
   border: 1px solid red;  
  word-break: normal
}

<script src="code.jquery.com/jquery-1.9.1.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <button class="newsize"> Change Width Height </button>
    

  <div id="inner" contenteditable=true>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
  </div>

question from:https://stackoverflow.com/questions/65933404/how-can-i-animate-this-jquery-style-change-new-problem-facing

Answer 1

Waitting for answers