JQuery première image suivante

Bonjour,

Sur un site d'une page avec un accordéon jQuery, je souhaite animer une image lorsqu'on clique sur le titre qui fait dérouler l'accordéon. J'arrive à animer toutes les images en même temps, mais j'aimerais que ce soit seulement la première qui suit le h3...

Voilà du code:

<script>
    $(function() {
        $("#accordion").accordion({
            activate: function(){
                $('img').rotate({
                    angle: 0, 
                    animateTo:360,
                    duration: 2000,
                })
            }

        });
        
    });    
 </script>

<div id="accordion">
  <div class="menu" id="presentation">
   <h3>
    <img src="img/menu_presentation.png" alt="" />Présentation
   </h3>
  </div>
  
 <div>
  <p>mon texte de présentation...</p>
 </div>

 <div class="menu" id="contact">
   <h3>
    <img src="img/menu_contact.png" alt="" />Contact
   </h3>

...

</div>

Comme il y a un div et un h3 avant l'image, je ne peux pas utiliser .next('img').
Comment faire pour pointer sur l'image contenue dans le h3 sur lequel je clique?

Merci d'avance!
Modifié par lefaye (04 Jul 2013 - 10:34)

En remplaçant #accordion par #presentation est-ce que ça marche?

A ce moment je n'ai plus l'accordéon... et donc plus non plus l'option "activate" et rien ne bouge.

La chose que je peux faire, c'est virer le div #presentation mais il y aura toujours un h3 avant l'image.

utilise comme selector pour ton .rotate : $('#presentation h3 img:eq(0)') ou tu peux tout simplement ajouter un id a ta première image puis en faire le selector concerné : $('#idimage')

Merci pour la réponse!

Ça ne marche toujours pas comme je veux, puisque c'est la première image qui tourne quel que soit le h3 sur lequel je clique... J'aimerais que ce soit l'image contenue dans le h3 qui tourne.

Bon, j'ai trouvé une solution:

<script>
    $(function() {
        $("#accordion").accordion({
            activate: function(){
                $(".menu").click(function () {
                    $(this).find('img:first').rotate({
                        angle: 0,
                        animateTo: 360,
                        duration: 2000,
                    })
                });
            }

        });
        
    });    
 </script>

Je ne sais pas si c'est la plus efficace, mais elle fonctionne...

Le problème que j'avais, c'était de récupérer l'image qui était dans le div sur lequel j'ai cliqué, et non pas la première image de l'accordéon, d'où la fonction click().

Je vais peut-être encore virer le div .menu et ne laisser que le h3, ce sera plus propre.