Function animate + index

Version imprimable

Bonjour,

J'aurais besoin d'une aide sur une syntaxe.

Alors voilà le contexte

Sur ma page web j'ai deux colonnes. La première dispose de titres, la deuxième d'images. Mon objectif est de faire en sorte que lorsque je survole le titre positionné en 2e position l'image en 2e position apparaît et ainsi de suite.

J'ai donc créer une variable permettant de récupérer la position de ces éléments. Ce que je cherche à faire c'est de relier le tout, soit à animer le survole.

Ci-joint le code
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ var index = $("#communique-G li").index(this); // Récupération positions des "Titres" var indexImg = $("txt-D img").index(this); // Récupération positions des "Images" $("#communique-G li" + index).mouseover(function(){ indexImg.css({'opacity' : '1'}).animate({'marginLeft' : '10'}, 250); }) });
Mon code est bien entendu faux. Quelle serait la bonne syntaxe?

Merci

EG

22/04/2015, 09h20
SpaceFrog

pourquoi passer par index ???
tu es dans un tableau ?
peut on voir le html ?
next devrait suffire

Hé bien... je suis passé par l'index car je pensais que c'était la bonne méthode à utiliser.

Ci-joint mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
    <ul id="communique-G"><!-- Colonne G -->
    	<li>
        	<h2>26.02.2015</h2>
            <h1>Resto Flash signe un accord avec les syndicats des restaurateurs indépendants</h1>
            <a href="#"><p>Télécharger le communiqué</p></a>
        </li>
        <li>
        	<h2>26.02.2015</h2>
            <h1>Resto Flash boucle une nouvelle levée de fonds d’1,1 million d’euros</h1>
            <a href="#"><p>Télécharger le communiqué</p></a>
        </li>
        <li>
        	<h2>26.02.2015</h2>
            <h1>Resto Flash signe un accord majeur avec les syndicats de la restauration (SNARR / SNRTC / SNRPO)</h1>
            <a href="#"><p>Télécharger le communiqué</p></a>
        </li>
        <li>
        	<h2>26.02.2015</h2>
            <h1>Resto Flash lève 1,25M€ pour accélérer son déploiement</h1>
            <a href="#"><p>Télécharger le communiqué</p></a>
        </li>
    </ul><!-- Fin Colonne G -->
    <div id="txt-D"><!-- Colonne D -->
    	<img src="img/communique-1.jpg" alt="Communiqué - Resto Flash signe un accord avec les syndicats des restaurateurs indépendants." class="communique-1"/>
        <img src="img/communique-2.jpg" alt="Communiqué - Resto Flash signe un accord avec les syndicats des restaurateurs indépendants." class="communique-2"/>
        <img src="img/communique-3.jpg" alt="Communiqué - Resto Flash signe un accord avec les syndicats des restaurateurs indépendants." class="communique-3"/>
        <img src="img/communique-4.jpg" alt="Communiqué - Resto Flash signe un accord avec les syndicats des restaurateurs indépendants." class="communique-4"/>
    </div><!-- Fin Colonne D -->
</body>

Mes images se trouvent les uns sous les autres en opacité 0 et disposent d'une margin-left à -600px. Donc lorsque je survole le 1e "li" la première image va passer en opacité 1 et avoir une margin-left de 10px pour donné cet effet de mouvement.

Ci-joint mon script

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function(){
	var index = $("#communique-G li").index(this); // Récupération positions des "Titres"
	var indexImg = $("txt-D img").index(this); // Récupération positions des "Images"
	$("#communique-G li" +  index).mouseover(function(){
		$(".communique-1").css({'opacity' : '1'}).animate({'marginLeft' : '10'}, 250);
		//console.log("Le numéro est" + index);	
	})
});
</script>

il faut récupérer l'index au moment du mouseover, aps avant

Code:

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
 
 
	$("#communique-G li").mouseover(function(){
         index = $("#communique-G li").index(this); // Récupération positions des "Titres"
           $(".communique-1:eq("+index+")").css({'opacity' : '1'}).animate({'marginLeft' : '10'}, 250);
		//console.log("Le numéro est" + index);	
	})
});

22/04/2015, 10h35
egcrea

Désolé... je ne comprends pas --'
22/04/2015, 10h40
Darkauron
Bonjour,

Dans ton code, tu récupère une valeur d'un index au moment où tu charges la page. Je t'avouerai que je ne sais même pas quel index va être récupéré.

Ton but est de récupérer l'index sur lequel ta souris est (mousehover) au moment de ton passage. Par exemple tu passe ta souris sur le 2ème LI, tu récupère l'index à ce moment :
Code:

1 2 $("#communique-G li").mouseover(function(){ index = $("#communique-G li").index(this);
et ensuite tu fais le traitement pour trouver l'image qui correspond à cette index avec ce code :

Code:

$(".communique-1:eq("+index+")")

et tu appliques ta transformation.

Darkauron