Ich bin ein Freund von bunten Statusmeldungen. „Speichern erfolgreich“, „Anmeldung fehlgeschlagen“, ein kleines Icon, schön farbig, user-friendly und ein bisschen Animations-Spielerei.

Das Coole ist: mit jQuery kann man eine solche Statusmeldung mit Style und Fading recht problemlos mit nur 1 Zeile realisieren!

Code

$.ajax({ type: 'POST', url: 'mailer.php', data:{'submit':'1','values':values}, success: function(data)
   {
	if($('#contact-wrapper .status').is(':hidden')) $('#contact-wrapper .status').html(data).addClass(data).fadeToggle().delay(3000).fadeToggle(function () { $(this).removeClass(data) }); /* 1 Zeile, ein Traum */
   } /* $.ajax success */
}); /* $.ajax */

(Update 1.1)

Die $.ajax Funktion liefert einen Rückgabewert der mailer.php. Dieser Rückgabewert ist entweder „success“ oder „error“. Das ließe sich natürlich ausbauen.
Die Statusmeldung ist mit CSS gestyled, wird eingeblendet, enthält einen bestimmten Text (in diesem Beispiel nur „success“ oder „error“), bleibt ein paar Sekunden stehen und wird dann ausgeblendet.

.status {
	display: none;
	border: 1px solid; 
}
.status.success {
	background: #DFF2BF url("img/10er-iconset.png") no-repeat 0px -38px;
	color: #4F8A10;
}
.status.error {
	background: #FFBABA url("img/10er-iconset.png") no-repeat 0px -58px;
	color: #D8000C;
}

Sehen wir uns die Codezeile im Detail an:

if($('#contact-wrapper .status').is(':hidden')) {
  $('#contact-wrapper .status').html(data)
    .addClass(data)
	  .fadeToggle()
	    .delay(3000)
		  .fadeToggle(function () { 
		    $(this).removeClass(data) 
		  });
}

(Update 1.1)

Zeile 1 überprüft, ob die Statusmeldung gerade angezeigt wird. Nur, wenn die Statusmeldung gerade nicht angezeigt wird, soll ein Klick (und damit das Einblenden der Statusmeldung) ausgelöst werden.
Zeile 2 setzt den Inhalt, also den Text, der Statusnachricht auf „error“ (

data

enthält den Rückgabewert der mailer.php). Hier sollte man vorher vielleicht eine aussagekräftigere Nachricht festlegen.
Zeile 3 fügt dem Zielelement die Klasse „error“ hinzu. Im CSS Dokument müssen die Klassen also so benannt sein wie die möglichen Rückgabewerte der mailer.php.
Zeile 4 blendet das Element ein, Zeile 5 wartet 3 Sekunden ab (lässt es also 3 Sekunden stehen),
Zeile 6 blendet das Element wieder aus, als callback Funktion (diese Funktion wird am Ende der Ausführung der fadeToggle Funktion ausgeführt) wird in
Zeile 7 die Klasse „error“ wieder entfernt.
(Update 1.1)

.fadeToggle(function(){}); mit callback muss sein, da sonst noch während der Ausblendeanimation (asynchron) die Styleklasse entfernt wird. Das führt zu Anzeigefehlern.

Dank jQuery ist das auch für den Internet Explorer kein Problem, kompatibel zu allen Versionen*.

Demo

Link

Download

jQuery-status-msg [.zip]
(Update 1.1)

Changelog

v1.1: Anzeigefehler bei mehrfachem Klick behoben (siehe Kommentar 1+2)