代码之家 › 专栏 › 技术社区 › itarachiu

如何在Ajax查询改变大小值时使输入宽度大小成为动画

ajax html javascript

itarachiu · 技术社区 · 6 年前

我的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>

我试着在javascript中使用.addclass,在转换中使用css类:2s;但它不起作用。怎么做?基本上,每次执行Ajax查询时,宽度必须是动态的。我的javascript代码做了两件事,第一件事是在用refresh ou price()打开页面后立即加载值,第二件事是用setinterval循环(refresh ou price,5000)。动画必须对两者都有效。

1 回复 | 直到 6 年前

Udara Kasun 6 年前

我找到了解决你问题的办法。如果您希望这样做,我建议您像这样更改代码。

记得: 您需要根据字体大小更改“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 Example

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前