Function animate + index

**egcrea** · 21/04/2015, 18h53

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 :

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

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

**SpaceFrog** · 22/04/2015, 09h20

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

**egcrea** · 22/04/2015, 09h56

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

Ci-joint mon html

Code html :

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

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 :

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

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>

**SpaceFrog** · 22/04/2015, 10h05

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

Code :

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

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);	
	})
});

**egcrea** · 22/04/2015, 10h35

Désolé... je ne comprends pas --'

**Darkauron** · 22/04/2015, 10h40

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 :

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

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 :

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

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

et tu appliques ta transformation.

Darkauron

Function animate + index

jQuery

Discussions similaires

Partager

Partager