Faire un effet de slide

Date d'inscription: 14/07/2010

Auteur	CTR*Seb
Difficulté d'intégration	Facile
Difficulté de compréhension	Amateur
Marche avec	Firefox V3.5.5, et les autres, je n'ai pas testé

ATTENTION : Ne marche pas sur les forums, mais sur les page .html ou .php
Voici le rendu : ICI

Salut à tous, aujourd'hui, je vais vous montrer comment on utilise l'effet slide de JQuery Smile

Tout d'abord, il faut avoir des petites bases en JavaScript et Très peu en JQuery.

1) Le xHTML
Le code va être simple :
-Un bouton
-Un div avec un display none

Le voici :

Code:

<input type="button" value="Effet !" id="clic" /><div id="element" style="display:none">
Mon texte caché

Mon texte caché

Mon texte caché

Mon texte caché

Mon texte caché

</div>

Bon, je ne vais pas expliquer ... Car c'est rudement simple pour le moment ^^
Pour le moment si vous testez ce code, rie ne va se passer ... Il faut suivre le tuto pour comprendre

2) Le JQuery

Ah, la partie intéressante Smile

, On va commencer par mettre des balises de scripts, entre head et head, comme ceci :

Code:

Voila

, maintenant, on va mettre le code JQuery que je vous ai préparé : ( à mettre la où je vous l'ai dit plus haut )

Code:

$(document).ready(function(){

$("#element").hide();
$("#clic").click(function(){

   if ($("#element").is(":hidden"))
   {
      $("#element").slideDown('slow');
   }
   else
   {
      $("#element").slideUp('slow');
   }

});

});

Voila, vous pouvez tester, ça marche Smile

Vous pouvez changer le 'slow' par 'fast' ou une durée en milliseconde.
Je vous laisse comprendre par vous même ce code, qui est assez logique, et donc simple pour les webmasters que vous êtes :hot:

3) Annexes
Pour ceux qui n'ont pas suivi, voici le code à copier/coller :

Code:

Merci d'avoir lu ce petit tuto, j'en ferai sûrement un autre sur l'effet fade Smile

A bientot !

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]