jQuery .animate Kontaktformular versteckt in div mit negativen Rand über Header

Question

Ich habe meine Kontaktformular mit einem negativen Rand-Top versteckt, so dass, wenn der Besucher auf "Kontakt" klickt es die div.

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

Sie es hier leben betrachten: http://www.brianrhea.com/index_contact.php - klicken Kontakt Link oben rechts

Mein Problem ist, dass, sobald das Formular abgeschickt wird, ist es die -620-Marge und den Erfolg erbt (oder Fehler) Eingabeaufforderung ist unsichtbar.

Ich bin zu einigen anderen Kreuzkompatibilitätsproblemen mit den Randabständen geraten, so dass ich nicht einmal sicher bin, dass dies der beste Weg ist, um darüber zu gehen. Natürlich wäre es toll, wenn ich einfach mit dem div als display anfangen könnte: versteckt und dann animiert es sichtbar zu machen, aber das war mir nicht möglich.

Jede Eingabe wird geschätzt, entweder mit Ratschlägen zum Speichern der Marge nach dem Senden des Formulars oder mit Vorschlägen für eine bessere Methode zum Erreichen dieses Verstecks.

Danke, Brian

Answer 1

Ich habe ein paar ausgezeichnete Vorschläge und wollte meine Lösung teilen, falls jemand anderes darauf kommt. http://www.brianrhea.com - klicken Projektanfrage

I, indem zwei separate divs über den Inhalt meiner Seite beginnen:

Die Live-Version ist hier zu sehen. Das erste Div enthält den Inhalt "Vielen Dank für das Absenden". Das andere div enthält das Kontaktformular selbst (div id = contactNone). Beide dieser divs werden angezeigt: keine im Stylesheet.

Mein Aufruf zum Handeln Taste ist ein div wie folgt:

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

Dies ist die

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

js folgenden Referenzen habe ich eine Schaltfläche zum Schließen, die die folgenden

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

verweist Für das Formular habe ich ein sehr gutes AJAX-basiertes Formular verwendet: www.queness.com/post/160/create-a-ajax-base d-form-submission-with-jquery

Ich bin sehr zufrieden mit den Ergebnissen und dankbar für die Richtung, die ich hier erhalten habe.

Hoffe, andere finden dies hilfreich!

Answer 2

die Kontakttaste mehrmals klicken, und Sie ein unangenehmes Problem bekommen. Ich würde die click Funktion ändern. Nur um es kühler (ich erinnere mich nicht, aber es ist eine Funktion dies besser viel zu tun):

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

Ich würde vorschlagen, überhaupt kein einreichen ermöglicht, und über AJAX einreichen (und kein leeres action Attribut verwendet wird. das ist mehr Cross-Browser, wie Menschen ohne JS kann auch nicht das Formular. ich würde diese Form geben ein id. Sagen wir es mr_form nennen.

Wenn mr_form eingereicht, Sie kann es tatsächlich zwingen, und Ihre Fehler ohne eine Seitenaktualisierung zu tun:

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

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

für die Nachrichten, würde ich ihre z-index--99 oder display-none gesetzt gerade. Das macht sie unsichtbar oder lässt sie unter dem anderen Inhalt schweben (setze auch z-index deines Inhalts). Abhängig von Ihrer Antwortnachricht können Sie dann die gewünschte Nachricht einblenden oder ausblenden.

Viel Glück (nur ein FYI, dieser Code ist nicht getestet und könnte nicht funktionieren. Sagen Sie mir, wenn es ausgebrannt ist, und ich werde es beheben).

Answer 3

Probieren Sie einige der integrierten Animationen aus, sie können normalerweise den Trick machen. Der Schlüssel hier kann sein, die Form absolut zu positionieren und sie zu verstecken, um zu beginnen.

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