jQuery .animate rivelare modulo di contatto nascosta in div con margine negativo sopra intestazione

Question

Ho il mio modulo di contatto nascosto con un negativo margin-top, in modo che quando i clic visitatori "Contatto" si rivela la div.

<script type="text/javascript">$("#revealContact").click(function(){
     $("#contact").animate({
          marginTop: "+=620px"
    }, 1000);
});</script>

È possibile vedere dal vivo qui: http://www.brianrhea.com/index_contact.php - clicca contatto link in alto a destra

Il mio problema è che non appena il modulo viene inviato, eredita il margine -620 e il successo (o errore) pronta è invisibile.

Io corro per alcuni altri problemi di compatibilità cross-pure con la spaziatura margine di così io non sono nemmeno sicuro che questo sia il modo migliore per andare su questo. Ovviamente sarebbe bello se potessi iniziare con il div come visualizzazione:. Nascosto e poi animarlo al visibile, ma non sono stato in grado di farlo

Ogni ingresso è apprezzato, sia con consigli su come salvare il margine dopo il modulo di presentazione, o suggerimento sul metodo migliore per raggiungere questo nascondere / rivelare.

Grazie, Brian

Answer 1

ho ottenuto alcuni ottimi consigli e ha voluto condividere la mia soluzione nel caso in cui nessun altro che scenderà su di questo.

La versione live può essere visto qui: http://www.brianrhea.com - fare clic su Progetto Richiesta

comincio mettendo due div separati sopra il contenuto del mio sito. La prima contiene i div "Grazie per l'invio" di contenuti. L'altra div contiene il modulo di contatto stesso (div id = contactNone). Entrambi questi div sono dati di visualizzazione:. None nel foglio di stile

Il mio pulsante di invito all'azione è un div, come di seguito:

<div id="projectRequestHome">
<a href="#">Request a Project</a>
</div>

Questa riferimenti seguenti js

 $("#revealContact").click(function(){
   $("#contactNone").slideDown('slow');
 });

Ho un pulsante di chiusura che fa riferimento al seguente

 $("#hideContact").click(function(){
   $("#contactNone").slideUp('slow');
 });

Per la forma, ho usato un ottimo modulo basato su AJAX trovato qui: www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

Sono molto soddisfatto dei risultati ottenuti e grato per la direzione che ho ricevuto qui.

Speranza altri trovare questo utile!

Answer 2

Fare clic sul pulsante di contatto più volte, e si ottiene un brutto problema. Cambierei la funzione click intorno. Giusto per rendere più fresco (non mi ricordo, ma ci è una funzione per fare questo molto meglio):

$('#revealContact').click(function()
{
  if ($('#contact').css('marginTop') != '620px')
  {
    $("#contact").stop().animate({marginTop: '620px'}, 1000);
  } else {
    $("#contact").stop().animate({marginTop: '0px'}, 1000);
  }
});

Vorrei suggerire non permettendo un presentare a tutti, e di inviarlo tramite la tecnologia AJAX (e non utilizzando un attributo vuoto action. Questo è più cross-browser, come le persone senza JS non possono nemmeno utilizzare quella forma. Darei che formare un id. chiamata Ammettiamolo mr_form.

Al momento della presentazione mr_form, si può effettivamente costringere a non fare gli errori e senza un aggiornamento della pagina:

$('#mr_form').submit(function()
{
  return false;

  $.post('your_contact_file.php', $('#mr_form').serialize(), function(response)
  {
    if (response == 'blah')
    {
      /* Do blah */
    } else {
      /* Blah */
    }
  });
});

Per i messaggi, avevo appena impostato il loro z-index a -99 o display a none. Che li rende invisibili, o rende poi galleggia sotto tutti gli altri contenuti (impostare z-index del suo sito web troppo). Poi, a seconda del messaggio di risposta, è possibile fade in / out o di diapositive, ecc il messaggio desiderato.

Buona fortuna (solo una cronaca, questo codice non è testato e potrebbe non funzionare . Dimmi se è brokeded, e io risolvere il problema).

Answer 3

Prova alcune delle costruito in animazioni, essi possono normalmente fare il trucco. La chiave qui può essere quello di posizionare la forma assolutamente, e nasconderlo per iniziare.

$("#revealContact").click(function(){
     $("#contact").slideDown();
});