jquery:show/hide div，计时

我这里有一个相当标准的问题

我有一个错误div

按下按钮时，会出现错误消息， 然后，在（500*n）ms（其中n=字母数）之后，div淡入淡出

我的问题发生在用户在div消失之前再次按下按钮时

当div仍然可见时，div内容将更新为新的错误消息

初始（500*n）ms后，div淡出，然后立即淡入，并在另一（500*n）ms内可见

我想要的是

• 用户点击按钮
• div内容已更新
• div褪色了
• 用户再次单击按钮
• div立即消失
• 内容已更新
• div褪色了

我怎样才能做到这一点

我现在的代码如下

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

---

如果停止动画并重置div

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

---

另一个解决方案是，单击按钮后，您可以禁用它，并且在div完成/动画完成后，您可以重新启用它。

类似这样的操作吗

 $(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);
            });
        })
    }
});

演示：