jquery - 根据计数器的值淡入/淡出文本

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

我尝试了以下方法，但似乎没有任何效果：-

$('#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设置to的样式，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); 
});