Hide success message
Success messages are great to inform the user that his or her actions were completed successfully. The messages should be in a green or blue colour to indicate the success of the action. The success message should also be located in a prominent position where it is easily seen and easily read. This ensures that the user sees the message and understands that he has completed what he or she was trying to accomplish.
Try out the example below to see a nice looking success message that hides after a few seconds. Please note javascript is required for the following message to work.
Create a success message with a delay
It appears that you have javascript disabled, these enable for this function to work.
As you can the success message is displayed for a few seconds and then hidden. The advantage of this action is that a user can move on to his or her next task without having the screen filled with messages. When doing this you need to make sure the message is not hidden too quickly or the user will not have time to read it and subsequently may become confused and disorientated. If this happens they may try to do their previous actions again thinking that it did not work.
Below is the jquery code to hide a success message after it is shown.
$('p.success').animate({ 'opacity':1 }, 4000).fadeOut(1000);
How it works is a delay of 4 seconds is initiated followed by a fade out which lasts 1 second. Feel free to change the values to suit your needs.
