Problema con formulario contacto jquery & php

[Eclypse05]

Mi problema es que no me muestra el "mensaje enviado" en el documento aver si pueden ayudarme y echarle un vistazo a mi codigo y decirme que esta mal??

Código HTML:

<form name="email_frm" id="form" method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">
            <label>Su nombre completo: &nbsp;</label>
            <input type="text" name="nombre" id="nombre" required="required"/>
            <label>Su email: &nbsp;</label>
            <input type="email" name="email" id="email" required="required"/>
            <label>Su tel&eacute;fono: &nbsp;</label>
            <input type="text" name="telefono" id="telefono"  required="required"/>
            <label>Su comentario: &nbsp;</label>
            <textarea cols="35" rows="6" required="required" name="mensaje"></textarea>
            <input type="submit" name="boton_enviar" id="boton_enviar" value="Enviar"/>
                        <div class="enviado">Su mensaje ha sido enviado.</div>
        </form>
 

Código CSS:

.enviado{
        color: green;
        margin:10px 10px 0px 0px;
        font-size: 14px;
        display: none;
    }
 

Código Javascript:

$(document).ready(function() { 
    $("#form").submit(function() {   
        event.preventDefault();
    var url = $(this).attr('action');  
    var data = $(this).serialize();
        
            var validation = true;
        if(!$("#nombre").val()){
            validation = false;
            $("#nombre").focus();
        }
        else if(!$("#email").val()){
            validation = false;
            $("#email").focus();
        }
                else if(!$("#telefono").val()){
            validation = false;
            $("#telefono").focus();
        }
                else if(!$("#mensaje").val()){
            validation = false;
            $("#mensaje").focus();
        }
                if(validation==true){
            $.post(url, data, function() {              
                                $('#form .enviado').fadeIn("normal");
                                $('#form')[0].reset();
                        });                               
                }      
    });
});
 

Código PHP:

<?php
    //Guardar los datos en variables
    $dest = "[email protected]"; 
    $nombre = $_POST['nombre'];
    $asunto = $_POST['nombre'];
    $email = $_POST['email'];
    $telefono = $_POST['telefono'];
    $mensaje = $_POST['mensaje']; 
    
    //Cabeceras del correo
    $headers = "From: $email\r\n"; 
    $headers .= "X-Mailer: PHP5\n";
    $headers .= 'MIME-Version: 1.0' . "\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
    
    //Crear el cuerpo
    $cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
    $cuerpo .= "<strong>Email:</strong> ".$email."<br>";
    $cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
    $cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
      
    //Validación      
    if(mail($dest,$asunto,$cuerpo,$headers)){
 
    } 
?>
 

[Eclypse05]

Alguna ayuda porfavor ya no se que hacer ando muy enredado

[maycolalvarez]

puede ser que fadeIn no altere display: none;, usa visibility: hidden;

[Eclypse05]

El efecto que quiero lograr es este

http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php

Código HTML:

 <div id="superior"></div>
            <div id="form">
		<form name="email_frm"  method="post" action="enviar-form.php" enctype="application/x-www-form-urlencoded">
			<label>Su nombre completo: &nbsp;</label>
			<input type="text" name="nombre" id="nombre" required="required"/>
			<label>Su email: &nbsp;</label>
			<input type="email" name="email" id="email" required="required"/>
			<label>Su tel&eacute;fono: &nbsp;</label>
			<input type="text" name="telefono" id="telefono"  required="required"/>
			<label>Su comentario: &nbsp;</label>
			<textarea cols="35" rows="6" required="required" name="mensaje"></textarea>
			<input type="submit" name="boton_enviar" id="boton_enviar" value="Enviar"/>                       
		</form>
            </div>
            <div id="inferior"><div id="msg"></div></div>
            
                <script>
                    $(document).ready(function() { 
                        $("#form").submit(function() {
                            
                                var validation = true;
                                    if(!$("#nombre").val()){
                                            validation = false;
                                            $("#nombre").focus();
                                    }
                                    else if(!$("#email").val()){
                                            validation = false;
                                            $("#email").focus();
                                    }
                                    else if(!$("#telefono").val()){
                                            validation = false;
                                            $("#telefono").focus();
                                    }
                                    else if(!$("#mensaje").val()){
                                            validation = false;
                                            $("#mensaje").focus();
                                    }
                                    if(validation==true){
                                            $.post('enviar-form.php', $(this).serialize(), function(data) {
                                                    $('#form').slideToggle("normal")
                                                    $('#msg').text('Gracias por enviar tu comentario')
                                            });
                                    }
                            event.preventDefault();
                        });
                    });</script> 

Código Javascript:

<?php
    //Guardar los datos en variables
    //$dest = "[email protected]";
    $dest = "[email protected]"; 
    $nombre = $_POST['nombre'];
    $asunto = $_POST['nombre'];
    $email = $_POST['email'];
    $telefono = $_POST['telefono'];
    $mensaje = $_POST['mensaje']; 
    
    //Cabeceras del correo
    $headers = "From: $email\r\n"; 
    $headers .= "X-Mailer: PHP5\n";
    $headers .= 'MIME-Version: 1.0' . "\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //
    
    //Crear el cuerpo
    $cuerpo = "<strong>Nombre:</strong> ".$nombre."<br>";
    $cuerpo .= "<strong>Email:</strong> ".$email."<br>";
    $cuerpo .= "<strong>Telefono:</strong> ".$telefono."<br>";
    $cuerpo .= "<strong>Mensaje:</strong> ".$mensaje;
      
    //Validación      
    if(mail($dest,$asunto,$cuerpo,$headers)){
        echo "Gracias por enviar su mensaje";
    }else{
        echo "No se envio el mensaje";
    }
?>