问题
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>
来源:https://stackoverflow.com/questions/65933404/how-can-i-animate-this-jquery-style-change-new-problem-facing