jquery: afficher/masquer div, timing

Question

J'ai un problème assez courant ici.

J'ai un div d'erreur,

quand un bouton est pressé est rempli avec un message d'erreur, la div est alors fané dans, après (500 * n) ms (où n = nombre de lettres) le div est éteint.

mon problème se produit lorsque l'utilisateur appuie à nouveau sur le bouton avant que le div soit éteint.

alors que la div est encore visible le contenu divs sont mis à jour avec le nouveau message d'erreur,

après les premiers (500 * n) ms div est masqué, puis immédiatement obtient fanées en arrière et est visible un autre (500 * n) ms.

Ce que je veux est.

bouton
• utilisateur clique
• contenu div sont mis à jour
• div disparaît doucement
bouton
• utilisateur clique à nouveau
• div immédiatement disparaît
contenu
• est mis à jour
• div est fanée dans

Comment puis-je y parvenir?

Mon code actuel est inférieur

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

Answer 1

exactement cela?

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

Démo: http://www.jsfiddle.net/N88gv/

Answer 2

Peut-être que si vous arrêtez l'animation et de réinitialiser la div

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

Answer 3

Une autre solution serait que après avoir cliqué sur le bouton, vous pouvez le désactiver et la div termine/l'animation est terminée, vous pouvez le réactiver.