Как сделать размер входной ширины для анимации, когда ajax-запрос изменяет значение размера

Question

Мой код JavaScript:

function refresh_price() {
    $.ajax({
        url:"query.php?currency=<?=$currencycode;?>"
    }).done(function(data) {
        $("value").attr("value", data).attr("size", data.length - 2);
    });
}

refresh_price();
setInterval(refresh_price, 5000);

HTML-код:

<input id="value" type="text" value="..." size="1" readonly>

Я пытался поиграть с .addClass в javascript и с классом css с переходом: 2s;Но это не работает.Как это сделать ?В основном ширина должна анимироваться каждый раз, когда выполняется запрос ajax.Мой код JavaScript выполняет 2 действия: сначала загружается значение сразу после открытия страницы с помощью refresh_price (), а затем выполняется цикл с помощью setInterval (refresh_price, 5000).Анимация должна работать для обоих.

Answer 1

Я нашел решение вашей проблемы. если вы хотите этого, я предлагаю изменить ваш код следующим образом.

Помните: Вам нужно изменить «7.5» в соответствии с размером шрифта.

<input id="value" type="text" value="..." size="1" readonly>

#value{   
   transition:width ease-in 500ms;
}

function refresh_price() {
    $.ajax({
        url:"query.php?currency=<?=$currencycode;?>"
    }).done(function(data) {
        $("value").attr("value", data).attr("size", data.length - 2);
        $("#value").width((data.length * 7.5) );
    });
}

refresh_price();
setInterval(refresh_price, 5000);

Это пример. использовать это только получить идею. используйте вышеуказанный кодовый блок. это решение, которое вы хотите

var  price=5000;
function refresh_price() { 
   var data="50000";
        $("#value").attr("value", price).attr("size", price.length - 2);
       $("#value").width((price.toString().length * 7.5) ); 
       
       if(price==1220703125000){
          price=5000;
       }else{
         price *= 5;    
       }
}

refresh_price();
setInterval(refresh_price, 5000);

#value{   
   transition:width ease-in-out 500ms;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<input id="value" type="text" value="..." size="1" readonly>

или используйте Пример Codepen