jquery : show/hide div, timing
<p>I have a pretty standard problem here.</p>

<p>I have an error div that,</p>

<p>when a button is pressed is populated with an error message,
the div is then faded in, after (500*n)ms (where n = number of letters) the div is faded out.</p>

<p>my issue occurs when the user presses the button again before the div has faded out.</p>

<p>while the div is still visible the divs contents are updated with the new error message,</p>

<p>after the initial (500*n)ms the div is faded out, then immediately gets faded back in and is visible for another (500*n)ms.</p>

<p>What I want is.</p>

<ul>
<li>user clicks button</li>
<li>div contents are updated</li>
<li>div is faded in</li>
<li>user clicks button again</li>
<li>div immediately fades out</li>
<li>content is updated</li>
<li>div is faded in.</li>
</ul>

<p>How can I achieve this?</p>

<p>My current code is below</p>

<pre><code>function login_error(message){
        $('form').effect('shake', { times: 1 }, 50);
        $('#error').html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast');
}
</code></pre>
