如何使用jquery更改文本框的背景颜色3秒？

Question

我正在做一个文本框，如果要求不符合，那么背景将变为黄色但我只想让背景保持黄色3秒......我该怎么做？

这就是我现在所拥有的，但黄色的bg仍然存在......

$("#form").on("submit",function(){


user = $("#username").val().length;
userErrorBg = $('#username').css('background','yellow');


if(user < 3 || user > 6)
{

    setInterval("userErrorBg",0);

}

})

我想在某个地方放一个clearInterval，但我需要一个时间计数吗？

Answer 1

您应该尝试使用setTimout()代替setInterval()。 setTimeout被触发一次并且不会自我重复，你不需要为setInterval清除间隔。

setTimout(function(){
    $('#username').css('background','white');
},3000);

Answer 2

最好使用setTimeout(function(){},time)，如果您认为它只在特定时间段内工作一次，而不是在给定的特定时间段后重复该功能的setInterval(function(){}, time)。

试试这个：

$("#form").on("submit", function () {
    user = $("#username").val().length;
    if (user < 3 || user > 6) {
       $('#username').css('background', 'yellow'); //<---need to put it here
       setTimeout(function () {
           $('#username').css('background', 'white').focus(); //<--add focus too
       }, 3000);
       return false;
    } 
}); 

CHECKOUT THE DEMO FIDDLE

This POST could help you。

Answer 3

$("#form").on("submit",function(){

试试这个 -

user = $("#username").val().length;
userErrorBg = $('#username').css('background','yellow').delay(3000).css('background','white');


if(user < 3 || user > 6)
{

    setInterval("userErrorBg",0);

}

})

Answer 4

试试这个..

$("#form").on("submit",function(){


user = $("#username").val().length; 


if(user < 3 || user > 6)
{

    setTimeout(function(){
        $('#username').css('background','yellow');
    },0);

    setTimeout(function(){
        $('#username').css('background','white');
    },3000);
}

});