Discussion :

[vinze60]

Bonjour à tous, je me lance dans le jquery afin d'ameliorer l'esthetique de mes sites.

Je suis débutant concernant le javascript donc désolé si ma question semble évidente mais je n'arrive pas à trouver de réponse !

Je m'exerce sur de l'affiche/masquage de contenu en cliquant sur des titres appropriés. Voici mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 
<DIV class="titre">Voici mon premier titre
<div class="description">
Il s'agit d'une description de la rubrique...
</div></DIV>

Je fais également appel au début de ma page au fichier js qui me permet de parametrer l'animation. Voici l'idée :

Dans ma page web il n'apparait que les titres. Lorsqu'on clique sur un titre celui-ci change d'apparence et la description se dévoile (show)en dessous du titre. Lorsqu'on reclique sur ce titre la description disparait (hide) et la mise en forme du titre revient à l'originale.

Pour cela j'utilise le fichier js qui est codée de la façon suivante (mon problème est de couleur rouge) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('.titre').css({background:"#FFB"}).toggle(function() {
$(this).animate({width:200},{queue:false, duration:600, easing: 'easeOutBack'});
$(???????).hide("slow");

},function() {
$(this).animate({width:"90%"},{queue:false, duration:600, easing: 'easeOutBounce'});
$(???????).show("slow");
})

Mon soucis c'est que la mise en forme du titre se passe bien mais pas la description. Comme vous pouvez le voir dans mon code je n'arrive pas (ne sais pas) à cibler la DIV qui à pour class="description" pour qu'elle s'affiche/ se masque.

J'ai essayé en faisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('.titre').css({background:"#FFB"}).toggle(function() {
$(this).animate({width:200},{queue:false, duration:600, easing: 'easeOutBack'});
$('.description').hide("slow");

},function() {
$(this).animate({width:"90%"},{queue:false, duration:600, easing: 'easeOutBounce'});
$('.description').show("slow");
})

L'animation se passe comme je le souhaite mais le soucis c'est que c'est TOUTES les div class="description" qui se masquent et s'affichent en même temps.

ya t'il un moyen javascriptement parlant pour dire "uniquement la div class="description" qui se trouve dans le titre (this) actuel" ?

Merci d'avance

[SpaceFrog]

peut être avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).next('.description')

[vinze60]

Merci pour votre réponse !!

Avec mon architecture de DIV cela ne fonctionne pas. J'ai du changer de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<DIV class="titre"></DIV>
<DIV class="description"></DIV>

et non pas (comme j'avais avant) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<DIV class="titre">
<DIV class="description"></DIV>
</DIV>

Pour ma compréhension personnelle, y'a t-il moyen de connaitre également la solution pour le deuxième cas ?

Merci

[SpaceFrog]

par le biais de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

children('.description')

??

[vinze60]

Génial ! Merci beaucoup ça fonctionne.

Comme je l'ai dis c'est pour moi tout nouveau cette facon de coder. Pouvez-vous m'indiquer un tutos, un site, une bibliothèque qui pourrais me renseigner sur la synthaxe à utiliser dans ce genre de problème ?

Dernière petite question :

Je cherche à faire une pause en plein milieu de ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$('.titre').css({background:"#FFB"}).toggle(function() {
$(this).animate({width:200},{queue:false, duration:600, easing: 'easeOutBack'});
----PAUSE DE 1 SECONDE----
$(this).children('.description').hide("slow");

},function() {
$(this).animate({width:"90%"},{queue:false, duration:600, easing: 'easeOutBounce'});
----PAUSE DE 1 SECONDE----
$(this).children('.description').show("slow");
})

Est-ce possible ?

D'avance merci

[SpaceFrog]

un delay() dans le callback de le première fonction ?


pour la doc tout est là http://docs.jquery.com/Main_Page

et tu as trouvé le bon forum

[vinze60]

Super meci pour le lien,

Je vais regarder tout ça