Effet Toggle avec JQuery - exemple
Effet Toggle avec JQuery - exemple d' utilisation de la fonction" toggle " de la magnifique librairie javascript .
1) Il faut inclure dans le " head " de notre page la librairie JQuery :
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
2) Toujours dans le " head " , on choisit l' élément qui va déclencher notre effet :
<script type="text/javascript">
jQuery(document).ready(function() {
$("#declencheur").click(function () {
$("#monDiv").toggle("slow");
});
});
</script>
A chaque clic sur l' élément d' ID " declencheur " on effectue la fonction toggle sur l' élément d' ID "monDiv" .
On peut passer différents arguments à la fonction toggle :
- toggle("") -> apparition , disparition du div sans aucun effet
- toggle("slow") -> apparition , disparition lente du div
- toggle("normal")
- toggle("fast")
- toggle("1000") -> temps en millisecondes de l' animation
3) Ensuite dans le " body " de notre page :
<span id="declencheur">
Cliquer ici : Effet Toggle
</span>
<div id="monDiv">
Mon div
</div>
La source du fichier HTML :
<head>
<title>Fonction Toggle de JQuery</title>
<meta name="generator" content="HAPedit 3.1">
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#declencheur").click(function () {
$("#monDiv").toggle("slow");
});
});
</script>
</head>
<body>
<h1>Effet Toggle de Jquery</h1>
<span id="declencheur">
Cliquer ici : Effet Toggle
</span>
<div id="monDiv" style="background-color:yellow;width:200px;height:200px;margin:10px;padding:10px;">
Mon div
</div>
</body>
</html>
voir toutes les infos : Informatique
« Effet de transparence au survol de la souris sur une image grâce au CSS
thead tbody tfoot - explications , exemple ( Tableau HTML ) »
Commentaire
Merci mais ne fonctionne pas chez moi.
En copiant ca au dessus de :
jQuery(document).ready(function() {
$(”#declencheur”).click(function () {
$(”#monDiv”).toggle(”slow”);
});
});
et ca dans la sidebar:
Cliquer ici : Effet Toggle
Mon div
Le texte apparait sans aucun effet
Posté le 9 mai 2009
Votre avis sur le billet : Effet Toggle avec JQuery - exemple