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

我有这个标记： –

以下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('You may only have up to 250 characters !'); } }); 

这很好用。

我希望修改上面的jQuery，以便#validator在出现时淡入，并且如果长度下降到0则淡出（当前不执行此操作，消息保留在屏幕上）。

编辑：忘记添加，我还有以下function： –

 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/

您需要隐藏validation器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('You may only have up to 250 characters !'); } $('#validator').fadeIn(200); if(charLength == 0) $('#validator').fadeOut(200); });