jQuery animation queue

I have an error message that shows when a开发者_如何学运维 value is wrong. and using a setTimeout of 3 seconds the message fades out. The problem is when the message shows first time and waits for 3 seconds and at that moment the user clicks submit again the event fires again. the first message fades and fades also the second message. here is the code of show message:

function showMSG(txt,type){
  $('.msg .text').html(txt);
  $('.msg').fadeIn(300);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  setTimeout(function(){$('.msg').fadeOut(300);},300);
}

Please any help thanks in advance

Edit for clarified question: In this case you'll need to handle your own timeout and stop the old animation (rather than using .delay() that you can't control), setTimeout() returns a timer ID that you can set for 3 seconds (3000ms not 300ms!) and when the next message is triggered, stop the timer with clearTimeout().

Also, you'll want to combine this with .stop() to clear the fade queue, like this:

var timer;
function showMSG(txt,type){
  clearTimeout(timer);
  $('.msg .text').html(txt);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  var msg = $('.msg').stop().fadeIn(300);
  timer = setTimeout(function() { msg.fadeOut(300); }, 3000);
}

You need to assign the timeout to a variable and make sure a timeout is not already set before setting a new one.

var timeout = null;


function showMSG(txt,type) {
    if (timeout !== null) clearTimeout(timeout);
    $('.msg .text').html(txt);
    $('.msg').fadeIn(300);
    $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
    timeout = setTimeout(function(){$('.msg').fadeOut(300);},300);
}