javascript - Jquery 验证淡入和隐藏

Question

我有一个这样的 JS 验证码:

$(document).ready(function(){
    $('#username').keyup(username_check);
}); 

function username_check(){  
    var username = $('#username').val();
    if(username == "" || username.length < 4){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
    }else{
        jQuery.ajax({
            type: "POST",
            url: "check_username.php",
            data: 'username='+ username,
            cache: false,
            success: function(response){
                if(response == 1){
            $('#username').css('border', '3px #C33 solid'); 
            $('#tick').hide();
            $('#cross').fadeIn();
                }else{
            $('#username').css('border', '3px #090 solid');
            $('#cross').hide();
            $('#tick').fadeIn();
                }
            }
        });
    }
}

HTML 代码:

<input type="text" name="username" id="username" class="input">
<img id="tick" src="images/tick.png" width="16" height="16"/>
<img id="cross" src="images/cross.png" width="16" height="16"/>

此代码运行良好，但现在我希望在验证之前隐藏图像。下面是屏幕截图。

Answer 1

虽然这可以用 JavaScript 完成，但最好使用 CSS。 JavaScript 在页面上最后加载，这意味着图像将出现，然后在 JavaScript 运行后消失。

快速而肮脏的方法是:

<img id="tick" src="images/tick.png" width="16" height="16" style="display:none"/>
<img id="cross" src="images/cross.png" width="16" height="16" style="display:none"/>

但是像这样添加一个 CSS 类会更好:

<img id="tick" src="images/tick.png" width="16" height="16" class="hider"/>
<img id="cross" src="images/cross.png" width="16" height="16" class="hider"/>

然后在 CSS 中:

.hider {
    display:none;
}