Les forums de JeuxVideo.com
-
skyboys
- Posté le
8 février 2012 à 10:55:33
-
Salut à tous,
Pour mon portfolio je souhaiterais utiliser le jQuery pour animer légèrement une page.
Comment ?
J'ai une div class .creation pour chaque création que j'ai fais. Je voudrais ajouter un bouton (genre un "+") dans chaque div pour pouvoir afficher plus d'informations sur cette création (afficher une nouvelle div juste en dessous pour afficher des screens du projet etc).
Comment animer ça avec jQuery sachant que je vais mettre ce + sur chaque div class, il va pas avoir de conflict avec chaque div class ?
Une idée du site déjà en place 
www.jimmyburbure.fr/portfolio.html
- Lien permanent
-
John_Dick
- Posté le
8 février 2012 à 12:27:19
-
<div class="creation">
<span id="plus">+</span>
<div class="info" style="display:none;">infos</div>
</div>
$('#plus').click(function(){
if($(this).text('+')) // si les infos sont cachées
{
$(this).find('div.info').show(); // on montre les infos
$(this).text('-'); // on remplace le + par un -
}
else
{
$(this).find('div.info').hide(); // on cache les infos
$(this).text('+'); // on remet le +
}
});
il ne va pas avoir de conflit grace à find() qui cherche uniquement dans les enfants du div où est situé le "+"
c'est peut etre pas la méthode la plus efficace, et j'ai pas testé, mais ça doit etre à peu près un truc dans le genre
et pas sûr pour le .text()
- Lien permanent
-
skyboys
- Posté le
8 février 2012 à 14:00:41
-
Merci de ta réponse c'est très gentil.
Alors, le + se change bien en - mais la div info ne s'affiche pas.
- Lien permanent
-
Slash_Snakepit
- Posté le
8 février 2012 à 14:33:29
-
Sinon il y a toggle() qui permet de jouer le rôle de l'interupteur et qui simplifie le code
- Lien permanent
-
skyboys
- Posté le
8 février 2012 à 15:19:47
-
J'ai utilisé .toggle()
$(document).ready(function(){
$("#plus").click(function () {
$(".info").toggle(['500']);
});
});
Bien entendu ça ouvre tout les class "info". Je vais chercher la solution quand même ! 
- Lien permanent
-
Fire_Storm
- Posté le
8 février 2012 à 17:02:30
-
Si tu pouvais aller fourrer tes merdes ailleurs. ^^
- Lien permanent
-
John_Dick
- Posté le
8 février 2012 à 19:56:24
-
non j'ai fait n'importe quoi...
le $(this).find('div.info') ne marchera pas vu que .find() cherche dans les enfants
or <div class="info"> n'est pas enfant du #plus 
du coup il faut remonter vers le partent, puis utiliser le find
et utiliser une class .plus et pas #plus
http://jsfiddle.net/xQqLD/2/ 
- Lien permanent
-
skyboys
- Posté le
8 février 2012 à 20:15:33
-
Merci de ta réponse.
J'ai effectué les changements mais regarde le souci http://jimmyburbure.fr/test/portfolio.html
(J'ai appliqué le code que pour la 1ère DIV, mais ça ne marche pas.. Pourquoi sur ton code ça marche et pas sur le mien ?)
- Lien permanent
-
John_Dick
- Posté le
8 février 2012 à 20:32:25
-
dans ton cas il faut remonter encore dans le DOM car le .plus est dans un autre <div class="nomEntreprise">
essaye:
$(this)..parent('div.nomEntreprise').parent('div.c
reation').find('div.info').toggle();
- Lien permanent
-
John_Dick
- Posté le
8 février 2012 à 20:33:08
-
merde y'a un point en trop:
$(this).parent('div.nomEntreprise').parent('div.c
reation').find('div.info').toggle();
- Lien permanent
-
skyboys
- Posté le
8 février 2012 à 20:36:57
-
Toujours le même problème..
Merci de ton aide
- Lien permanent
-
John_Dick
- Posté le
8 février 2012 à 20:46:37
-
apparemment ça vient pas du JS, mais d'une balise <p> mal fermée
<p>Auto-entrepreneur - Loriol sur drôme - Site vitrine & boutique<p>
- Lien permanent
-
skyboys
- Posté le
8 février 2012 à 20:49:17
-
Alléluia
Merci beaucoup, tout fonctionne parfaitement. Je te remercie.
Tout vas bien !
Sujet Résolu !
- Lien permanent
Sujet : « jQuery : Show une div class »
Ajouter ce forum à mes forums préférés
