title: How to start/stop/restart jQuery animation
body: <p>I have the following function that when I call displays a message to the user for a certain amount of time (5 secs in my case). During this "period" if I call the function again to display another message, practically it should hide, then re-appear with the new message for another 5 seconds.</p>
  
  <p>What happens with my code below, I call the function to display the message. Then, lets say on the 4th second, I call it again to display another message, the new message is displayed for 1 second.</p>
  
  <p>I need to somehow -reset- the time but can't figure out how. Tried stopping the animation, checking if the element was visible and hiding it if it was, and many other things. I believe the solution is a simple chaining issue but can't get it right. So any help would be appreciated!</p>
  
  <pre><code>function display_message(msgType, message) {
  
      var elem = $('#ur_messagebox');
  
      switch (msgType) {
          case 'confirm':
              elem.addClass('msg_confirm');
              break;
  
          case 'error':
              elem.addClass('msg_error');
              break;
      }
  
      elem.html(message);
      elem.show().delay(5000).fadeOut(1000);
  }
  </code></pre>
  
  <p>thanks in advance...</p>