Bonjour à ceux qui me liront.
Je préviens ceci est un petit pavé pour bien expliquer la situation. Merci à ceux qui me liront.

Je souhaiterais obtenir une réponse à problématique qui, visiblement, dépasse mes compétences.

Contexte
Je construit un damier composé de plusieurs cases. D'un point de vue HTML rien de bien méchant des "ul" qui forment les rangées agrémentés de "li" qui forment les cases. Ces cases en question sont des images.
Mon but est de leur exercer une rotation sur l'axe X lors d'un survol de souris.
Cette étape est validée.

Pour la compréhension de la suite je précise que lorsque l'image effectue la rotation elle pivote de 180° et donc l'image s'inverse (effet miroir).

Je ce que je souhaite à présent ce que pour certaines cases au lieu d'avoir la même image en inversée, je souhaiterais avoir une image A au survol et une image B à la fin de la rotation.
Concrètement pour le réaliser il suffirait d'avoir mon image A qui pivote à 90° puis qu'elle disparaisse laissant la place à l'image B qui va faire les 90° restant et ainsi terminer l'animation.

Réalisant un damier fluide et responsive je ne peux superposer l'image A et B (c'est ce que j'avais testé la toute première fois où j'ai crée cette effet). Par conséquent l'image B se situe à côté de l'image A (rappel ce sont des "li"). Mais (détail important) l'image B est invisible (en display none) ce qui me permet de garder la structure de mon damier et non d'avoir un trou décalant mes cases.

Ce que j'ai
Je dispose de la fonction qui fait pivoter mes éléments.
Je dispose de la fonction qui fait pivoter mon image A puis la fait disparaitre.
Je dispose de la fonction qui fait apparaître mon image B puis la fait pivoter.

Pour résumer.
Lorsque je survole l'image A celle ci pivote à 90° puis disparaît, l'image B apparaît et effectue la rotation à son tour.
La logique des choses voudrait que l'image B (puisque situé à côte, rappel ce sont des "li") "prennent" la place de l'image A (car après la rotation de 90° elle disparaît) et termine l'animation. Et c'est là que ça coince.
L'image A disparaît bien mais mon image B effectue comme un "retour charriot" (il se met à la ligne). Il ne se met pas du tout à la place de l'image A voire même à côté de celle çi. J'ai inspecté l'élément et aucun moyen de voir d'où cela provenait.

De plus je ne parviens pas à réaliser une fonction callback.
La fonction de l'image A et de l'image B s'effectue en même temps. Lorsque j'ai écris ma fonction callback la rotation est comme annihilé et seul la disparition de l'élément au survol est pris en compte.

Pfiouu
Je sais que je m'attaque à quelque chose de ardue mais je suis convaincu de l'effet réalisé.

Ci joint mon script et mon HTML

Code : 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
$(document).ready(function(){
 
		var ItemsGen = $('.img-responsive');// sélection de l'ens des images
		//
		function animItems(pDir,pThis) //rotation générale pour "li"
		{
			pThis.animate({ //pThis.children()rotation sur le "li" survolé et non l'ensemble des li en même temps
				rotateX:pDir+'deg'
			},550);
		}
		ItemsGen.mouseover(function()//survol d'un "li"
		{
			animItems(360,$(this))// Rotation générale des "img" sur l'axe X - Damier
		});
		// Rotation spécifique des imgs avec pictos
		// 2 imgs supperposées
		// la 1e, au survol, rotation 90 puis disparition
		// la 2e apparition puis rotation de 90
		var ItemPrimo = $('.img-picto');// 1e img
		var ItemBis = $('.img-pictobis');// 2e img
 
		ItemPrimo.mouseover(function()//survol 1e image
		{
			animItemsPrimo(90,$(this))//rotation 1e image
		},function(){
                   animItemsBis(90,$(this))//rotation 2e image - callback qui ne marche pas
                  });
		//
		function animItemsPrimo(pDir,pThis)//fonction rotation 1e image 
		{
			pThis.stop().animate({
				rotateX:pDir+'deg'//rotation
			},250,function(){//fnction callback
				pThis.css('display','none')//disparition après rotation
				})
		}
               function animItemsBis(pDir,pThis){//fonction rotation 2e image
			ItemBis.css('display','block')//apparition de l'img
			ItemBis.stop().animate({//rotation 2e image
				rotateX:pDir+'deg'
			},250)
		}
 
	});
Merci encore une fois.

EG