Jquery et effet slide
orphen
-
hector valdes -
hector valdes -
Bonjour,
j’ai une question relative à la bibliothèque Jquery et plus précisément sur le javascript.
Je souhaite appliquer sur une page internet un effet, par exemple slidedown/up. Le problème qui se pose et que je souhaite appliquer l’effet à 2 liens et sans à avoir « dupliquer » le code javascript. Je m’explique :
Imaginons ce code html :
Maintenant voici le code javascript qui se trouve dans « effets_jquery.js » :
Ma question est comment puis-je avoir une seule fonction qui sera utilisable plus facilement sans avoir à ajouter le même code dans le fichier « effects_jquery.js » si je souhaite attribuer cet effet à un nouveau lien/objet ?
Je pense qu’il faut inclure dans le code html et dans la balise des liens un truc de ce genre <a onclick="Effect.toggle….. > mais je bute :(
Merci de tout aide.
j’ai une question relative à la bibliothèque Jquery et plus précisément sur le javascript.
Je souhaite appliquer sur une page internet un effet, par exemple slidedown/up. Le problème qui se pose et que je souhaite appliquer l’effet à 2 liens et sans à avoir « dupliquer » le code javascript. Je m’explique :
Imaginons ce code html :
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src=" fonctions_jquery.js" type="text/javascript"></script>
<script src="effets_jquery.js" type="text/javascript"></script>
</head>
<body>
<p><a href="#" class="lien-test">Liens</a></p>
<div id="lien" style="display: none;">
- <a href="http://exempledelien1.com" target="_blank">exemple1</a><br />
- <a href="http://exempledelien2.com /" target="_blank">exemple2</a>div>
<p><a href="#" class="video-test">Video</a></p>
<div id="video" style="display: none;">
- <a href="http://exempledelien3.com" target="_blank">exemple3</a><br />
- <a href="http://exempledelien4.com /" target="_blank">exemple4</a>div>
</body>
Maintenant voici le code javascript qui se trouve dans « effets_jquery.js » :
$(document).ready(function(){
$(".lien-test").click(function(){
$("#lien").slideToggle("normal");
$(this).toggleClass("active"); return false;
});
$(".video-test").click(function(){
$("#video").slideToggle("normal");
$(this).toggleClass("active"); return false;
});
});
Ma question est comment puis-je avoir une seule fonction qui sera utilisable plus facilement sans avoir à ajouter le même code dans le fichier « effects_jquery.js » si je souhaite attribuer cet effet à un nouveau lien/objet ?
Je pense qu’il faut inclure dans le code html et dans la balise des liens un truc de ce genre <a onclick="Effect.toggle….. > mais je bute :(
Merci de tout aide.
A voir également:
- Jquery et effet slide
- Effet miroir word - Guide
- Effet miroir photo - Accueil - Photo
- Effet miroir telephone - Guide
- Effet ralenti video - Guide
- Photo effet dessin gratuit - Télécharger - Retouche d'image
1 réponse
Il y a plusieurs solutions possibles :
- Tu leur mets le même nom de classe
- Tu les encapsules dans des div de même classe
etc. etc.
Sachant qu'un évènement JQuery se déclenche sur une action sur un element identifié, il faut forcément que tes deux éléments aient quelque chose en commun. Et ça reste très vaste.
Je te conseille d'aller faire un tour sur le site de l'API JQuery -> Rubrique Selector pour avoir plus de détails.
- Tu leur mets le même nom de classe
- Tu les encapsules dans des div de même classe
etc. etc.
Sachant qu'un évènement JQuery se déclenche sur une action sur un element identifié, il faut forcément que tes deux éléments aient quelque chose en commun. Et ça reste très vaste.
Je te conseille d'aller faire un tour sur le site de l'API JQuery -> Rubrique Selector pour avoir plus de détails.