[Resolvido] Adicionar Efeitos FADE em um SEND sem REFRESH

[paulo_roll 0]

Bom dia, pessoal.

 

Minha página envia uma mensagem sem precisar dar Refresh, porém

a mensagem "Mensagem Enviada com Sucesso!", aparece de forma estática.

 

Gostaria de acrescentar um FADE pra ficar mais atraente pro internauta.

Um fade que fizesse sumir lentamente o formulário e aparecesse lentamente

a mensagem enviada com sucesso.

 

Estou usando JQuery. Alguém sabe a função que faz isso?

 

<script type="text/javascript">
       function clean_default_pass(field) {
   		if (field.value == field.defaultValue) {
       		field.value = "";
			$('#message').animate({height:150},"slow");
			document.getElementById("botao_enviar").style.display="inline";
   		}
	}

	function write_default_pass(field) {
   		if (field.value == "") {
       		field.value = "Escreva a sua pergunta...";
			$('#message').animate({height:38},"slow");
			document.getElementById("botao_enviar").style.display="none";
   		}
	}


	// wait for the DOM to be loaded 
       $(document).ready(function() { 
           // bind 'myForm' and provide a simple callback function 
           $('#myForm').ajaxForm(function() { 
               //alert("Thank you for your comment!");
			document.getElementById("myForm").style.display="none"; 
			document.getElementById("mensagem_enviada").style.display="inline";
           }); 
       }); 
       </script>

 

 

 

<form class="formee"  id="myForm" method="post" action="enviar.php">
           	<div class="grid-12-12">
               <h1 class="left">PERGUNTAS AO VENDEDOR</h1>
               <!-- <label>Field Label <em class="formee-req">*</em></label> -->
               <textarea name="txtmessage" id="message" style="height: 38px;" onfocus="clean_default_pass(this);" onblur=" write_default_pass(this);">Escreva a sua pergunta...</textarea>
       		</div>
               <div class="grid-3-12" id="email" style="display:none;">
                       	<input type="text" name="email" />
               </div>
               <div class="grid-12-12" id="botao_enviar" style="display:none;">
                       <input type="submit" id="botao_enviar" title="send" onclick="" value="Enviar Pergunta" />
               </div>
           </form>
           <div id="mensagem_enviada" style="display:none;"><h1>Mensagem Enviada com Sucesso!</h1></div>

[William Bruno 1501]

a função jquery é a .fadeIn()

[paulo_roll 0]

Fiz as alterações para fazer um fadeOut na div myForm e um fadeIn na div mensagem_enviada,

porém quando eu clico em enviar não acontece nada. O código antigo funciona, mas o do Fade não.

 

ANTIGO

<script type="text/javascript">

               // wait for the DOM to be loaded 
       $(document).ready(function() { 
           // bind 'myForm' and provide a simple callback function 
           $('#myForm').ajaxForm(function() { 
               //alert("Thank you for your comment!");
                               document.getElementById("myForm").style.display="none"; 
                               document.getElementById("mensagem_enviada").style.display="inline";
           }); 
       }); 
       </script>

 

 

FADE

$(document).ready(function() { 
           // bind 'myForm' and provide a simple callback function 
           $('#myForm').ajaxForm(function() { 
               //alert("Thank you for your comment!");
			//document.getElementById("myForm").style.display="none"; 
			//document.getElementById("mensagem_enviada").style.display="inline";
			$("myForm").fadeOut("slow");
			$("mensagem_enviada").fadeIn("slow");
           }); 
       }); 

 

Pelo que vi na documentação do JQuery, a sintaxe está certa. Onde será que errei?

Valeu pela atenção.

[William Bruno 1501]

veja o correto:

 

                                $("#myForm").fadeOut("slow");
                               $("#mensagem_enviada").fadeIn("slow");

o seletor usado, é com sintaxe CSS.

[paulo_roll 0]

William Bruno,

 

Muito obrigado mesmo. Funcionou. Show de bola!

 

Abraço.