jquery : show/hide div, timing

I have a pretty standard problem here.

I have an error div that,

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.

my issue occurs when the user presses the button again before the div has faded out.

while the div is still visible the divs contents are updated wi开发者_Python百科th the new error message,

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.

What I want is.

• user clicks button
• div contents are updated
• div is faded in
• user clicks button again
• div immediately fades out
• content is updated
• div is faded in.

How can I achieve this?

My current code is below

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

simething like this?

 $(function() {
    var counter = 0;
    var timeOut;
    $('button').click(function() {
        showdiv('clicked ' + counter++);
    });

    function showdiv(str) {
        clearTimeout(timeOut);
        $('div').fadeOut(function() {
            $(this).html(str).fadeIn(function() {
                timeOut = setTimeout(function() {
                    $('div').fadeOut();
                }, 100 * str.length);
            });
        })
    }
});

demo: http://www.jsfiddle.net/N88gv/

Perhaps if you stop the animation and reset the div

  $('#error').stop().hide().html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast');

Another solution would be that after clicking the button you can disable it and with the div finishes/the animation is done you can enable it back.