Fade in/out text based upon value of counter
<p>I have this markup:-</p>

<pre><code>&lt;textarea id="TextBox1"&gt;&lt;/textarea&gt;
&lt;span id="validator"&gt;&lt;/span&gt;
</code></pre>

<p>And the following jQuery:-</p>

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

<p>This works fine.</p>

<p>I wish to modify the above jQuery so that the <code>#validator</code> 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).</p>

<p><strong>EDIT:</strong> Forgot to add, I have the following function also:-</p>

<pre><code>jQuery.fn.fadeInOrOut = function(status) {
    return status ? this.fadeIn() : this.fadeOut();
}; 
</code></pre>

<p>I have tried the following but it doesent seem to have any effect:-</p>

<pre><code>$('#validator').html(charLength + ' of 250 characters used').fadeInOrOut(!! charLength);
</code></pre>

<p>and...</p>

<pre><code>$('#validator').html(charLength + ' of 250 characters used');
$('#validator').fadeInOrOut(!! charLength);
</code></pre>
