jQuery的淡入驗證並隱藏

我有一個這樣的JS驗證碼：jQuery的淡入驗證並隱藏

$(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"/>

此代碼工作不錯，但現在我想的形象應該是隱藏前驗證。以下是截圖。

enter image description here

來源

2012-09-06 X-men

爲什麼在準備好之外的功能？ –

雖然這可以用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類，像這樣：

在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"/>

然後：

.hider { 
    display:none; 
}

來源

2012-09-06 13:22:52

+1使用類而不是樣式。 –

不錯..感謝您的分享... –

在你的CSS，把屬性：display: hidden;上打鉤和交叉兩者。這會確保在第一次加載頁面時它們處於隱藏狀態。輸入用戶名後，fadeIn將根據您的需要設置顯示。

來源

2012-09-06 13:22:42 Silox

$(document).ready(function(){ 
$("#tick").hide(); 
$("#cross").hide(); 
});

如果你需要j，你可以使用這個在css中查詢或使用display:none。 visibility：hidden的;也可以使用充分jQuery腳本

<script> 
$(document).ready(function(){ 
$("#tick").hide(); 
$("#cross").hide(); 
$('#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(); 
     } 
} 
}); 
} 
} 
</script>

來源

2012-09-06 13:24:01 gokul

<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"/> 

$(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'); 
$('#cross').fadein(); //changed 
}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(); //changed 

}else{ 
$('#username').css('border', '3px #090 solid'); 
$('#cross').hide(); 
$('#tick').fadeIn();// changed 
    } 
} 
}); 
} 
}

來源

2012-09-06 13:26:18

嘗試這個邏輯，

1）改變的jQuery來源：

$(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').fadeIn("slow"); 
$('#cross').fadeOut("slow"); 
}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'); 
    $('#cross').fadeIn("slow"); 
    $('#tick').fadeOut("slow"); 
    }else{ 
    $('#username').css('border', '3px #090 solid'); 
    $('#tick').fadeIn("slow"); 
     $('#cross').fadeOut("slow"); 
     } 
} 
}); 
} 
}

2）和HTML源：

<input type="text" name="username" id="username" class="input"> 
     <img id="tick" src="images/tick.png" alt="Tick" style="display: none" width="16" 
      height="16" /> 
     <img id="cross" src="images/cross.png" alt="Cross" style="display: none" width="16" 
      height="16" />

來源

2012-09-06 13:32:32 Elyor

jQuery的淡入驗證並隱藏

回答

相關問題