2010-11-18 13 views
0

Hallo, ich bin für eine schnelle und einfache Lösung für das folgende suchen:Schnelle und einfache Wirkung jQuery

ich eine Division-Tag haben, die dreimal die Breite der Zelle ist (so meine sichtbare Zelle/div wird 200px aber der Inhalt wird 600px) muss es in angezeigt werden, und ich möchte sie folgendes tun:

-------------------------- 
|  |  |  | 
| 1 | 2 | 3 | 
|  |  |  | 
-------------------------- 

Zunächst würde ich gerne 1 dann sehen, wenn der Benutzer auf einen Link in 1 klickt sollte es Schieben Sie auf 2. Wenn Sie auf 2 sind, wird dem Benutzer ein einfaches 2-Felder-Formular für Name und Telefonnummer angezeigt. Wenn der Benutzer auf die Senden-Schaltfläche klickt, möchte ich, dass er das Formular sendet und dann zu 3 überblättert, was eine Dankeschön-Nachricht sein wird, bevor es nach X Sekunden auf 1 zurückgleitet.

Ich denke, dass es leicht sein sollte und ich denke, dass es sehr einfach zu implementieren sein sollte, aber erst vor kurzem mit jQuery begann, so dass ich immer noch den Kopf herumkriege!

Jede Hilfe wäre willkommen.

Antwort

1

Angenommen, Sie können die benötigte html/css selbst handhaben jQuery's animate sollten Sie tun können, was Sie wollen.

Wenn Klick in 1

$(elm).animate({left: '+=200'}, 2000); /* time in ms the transition from 1 to 2 should take */ 

am 2. Unter der Annahme, bekam man ein Formularelement

Sie benötigen die submit Veranstaltung mit bind() auf dem Formular erfassen und die Standardaktion zu verhindern und stattdessen die Daten einreichen in Hintergrund mit jQuery.post(). Zur gleichen Zeit die Animation wieder von 2 bis 3

$(elm).animate({left: '+=200'}, 2000).delay(5000).animate({left: '-=400'}, 1000); 
//this goes from 2 to 3 in 2s displays 3 for 5s and then goes back to 1 in 1s 
zu erhalten