jquery - 如何使用 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

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;
    } 
}); 

查看演示小提琴

这篇文章可以帮助你。

Answer 2

您应该尝试使用setTimout()而不是setInterval()。setTimeout 被触发一次并且不会自我重复，并且您不需要清除间隔，因为您必须这样做setInterval。

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

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);
}

});