淡入/淡出根據計數器

Question

的價值文本我有這樣的標記： -

<textarea id="TextBox1"></textarea> 
<span id="validator"></span> 

而下面的jQuery： -

jQuery('#TextBox1').live('input', function() { 
    var charLength = $(this).val().length; 
    $('#validator').html(charLength + ' of 250 characters used'); 
    if ($(this).val().length > 250) { 
     $('#validator').html('<strong>You may only have up to 250 characters !</strong>'); 
    } 
}); 

這工作得很好。

我希望修改上面的jQuery，以便#validator在出現時淡入，並且如果長度下降到0（當前不執行此操作，消息停留在屏幕上），淡出效果。

編輯：忘了補充，我有以下功能也： -

jQuery.fn.fadeInOrOut = function(status) { 
    return status ? this.fadeIn() : this.fadeOut(); 
}; 

我曾嘗試以下，但它doesent似乎有什麼影響： -

$('#validator').html(charLength + ' of 250 characters used').fadeInOrOut(!! charLength); 

和...

$('#validator').html(charLength + ' of 250 characters used'); 
$('#validator').fadeInOrOut(!! charLength); 

Answer 1

看到這個：http://jsfiddle.net/CsXU8/3/

你需要隱藏驗證器onload（用css）。否則不能淡入

所以添加在你的CSS這一行：

#validator {display:none} 

應該做的伎倆。

Answer 2

設置#validator樣式爲display:none 然後用這個

jQuery('#TextBox1').live('input', function() { 
    var charLength = $(this).val().length; 
    $('#validator').html(charLength + ' of 250 characters used');  
    if ($(this).val().length > 250) { 
     $('#validator').html('<strong>You may only have up to 250 characters !</strong>'); 
    } 
    $('#validator').fadeIn(200); 
    if(charLength == 0) 
    $('#validator').fadeOut(200); 
});