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的样式设置为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); 
});

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

2 个答案: