jquery: показать/скрыть div, timing

Question

У меня есть довольно стандартная проблема здесь.

У меня есть DIV ошибок, что

при нажатии кнопки заполняется с сообщением об ошибке, ДИВ затем утрачен в после (500 * п) мс (где п = число букв) div исчезает.

моя проблема возникает, когда пользователь снова нажимает кнопку до того, как div исчез.

пока ДИВ еще видны дивы содержимое обновляется с новым сообщением об ошибке,

после первоначального (500 * п) мс DIV будет затухать, то сразу становится утрачен назад и является видимым для другой (500 * n) мс.

Что я хочу.

• пользователь нажимает кнопку
• содержимое DIV обновляются
• ДИВ утрачен в
• пользователь нажимает кнопку снова
• деление с сразу затухает
• содержание обновляется
• ДИВ утрачен в .

Как я могу это достичь?

Мой текущий код ниже

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

Answer 1

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

демо: http://www.jsfiddle.net/N88gv/

Answer 2

Возможно, если вы остановить анимацию и сбросить DIV

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

Answer 3

Другим решением было бы, что после нажатия на кнопку, вы можете отключить его и с DIV заканчивается/анимация завершена, вы можете включить ее обратно.