effet jQuery rapide et facile

Question

Salut, je suis à la recherche d'une solution rapide et facile à ce qui suit:

J'ai une étiquette de division qui est trois fois la largeur de la cellule (si ma cellule visible/div sera 200px mais le contenu sera 600px), il doit être affiché et je voudrais à faire ce qui suit:

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

dans un premier temps, je voudrais voir 1 puis lorsque l'utilisateur clique sur un lien dans 1, il devrait glissez vers 2. Lorsque l'utilisateur recevra un formulaire de 2 champs simple pour le nom et le numéro de téléphone. Lorsque l'utilisateur clique sur le bouton «Soumettre», je voudrais qu'il envoie le formulaire, puis glisse vers 3, ce qui sera un message de remerciement avant de revenir à 1 après X secondes. Je pense que cela devrait être facile et je pense qu'il devrait être très simple à implémenter, mais j'ai commencé à utiliser jQuery récemment tout en gardant ma tête tout autour!

Toute aide serait appréciée.

Answer 1

En supposant que vous pouvez gérer le html/css nécessaire vous-même animate de jQuery devrait vous permettre de faire ce que vous voulez.

Lorsque, cliquez sur 1

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

En supposant le 2 vous avez un élément de forme

Vous devez capturer l'événement submit avec bind() sur la forme et empêcher l'action par défaut et en présenter les données arrière-plan en utilisant jQuery.post(). Dans le même temps faire à nouveau l'animation pour obtenir de 2 à 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