根据计数器的值淡入/淡出文本 [英] Fade in/out text based upon value of counter

问题描述

我有这个标记:-

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

以及以下jQuery:-

And the following 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(当前不执行此操作，消息仍停留在屏幕上)，淡出#validator.

I wish to modify the above jQuery so that the #validator fades in when it appears and also fades out if the length drops to 0 (doesn't do this currently, message stays on the screen).

编辑:忘记添加，我还具有以下功能:-

Forgot to add, I have the following function also:-

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

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

I have tried the following but it doesent seem to have any effect:-

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

和...

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

推荐答案

请参见: http://jsfiddle. net/CsXU8/3/

您需要隐藏验证器onload(使用CSS).否则它不会消失.

You need to hide the validator onload (with css). else it cannot fade in.

因此在您的CSS中添加以下行:

So adding this line in your css:

#validator {display:none}

应该可以解决问题.

这篇关于根据计数器的值淡入/淡出文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！