Discussion :

[egcrea]

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

[egcrea]

Voici mon damier en question.

Les images qui nécessitent tout ce binz sont celles qui portent un picto.

Merci encore une fois.

EG

[NoSmoking]

Bonjour,
ce que tu cherches à faire s'appelle un FLIP, fait une recherche de ce coté là et je ne doute pas qu'il existe des plugin jQuery traitant de cela.

[danielhagnoul]

Rotation au "survol" : je comprends.
Rotation avec superposition d'images : je ne comprends pas.
animate rotateX ?? (plugin ?)

Pour animer au survol, je propose l'exemple ci-dessous :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
        .testX, .testY, .test { position: relative; background-color: yellow; top: 100px; left: 100px;
            width: 100px; height: 100px; border: 1px solid black; padding: 12px; }
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        function getType( Obj ){
            return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
        }
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
 
        });
 
        $( window ).load( function(){
 
            function rotationX( elem ){
                $( elem ).animate(
                    { 
                        "deg" : "+=10",
                    }, 
                    {
                        "duration" : 500,
                        "easing" : "linear",
                        "step" : function( now, fx ){
                            if ( fx.prop == "deg" ){ // now est deg
                                $( this ).css( "transform", "rotateX(" + now + "deg)" );
                            }
                        },
                        "complete" : function(){
                            if (  $( elem ).data( "rotateX" ) === "oui" ) {
                                rotationX( elem );
                            }
                        }
                    }
                );
            }
 
            $( ".testX" ).on({
                "mouseenter" : function( event ){
                    $( event.target ).data( "rotateX", "oui" );
                    rotationX( event.target );
                },
                "mouseleave" : function( event ){
                    $( event.target ).data( "rotateX", "non" );
                }
            });
 
            function rotationY( elem ){
                $( elem ).animate(
                    { 
                        "deg" : "+=10",
                    }, 
                    {
                        "duration" : 500,
                        "easing" : "linear",
                        "step" : function( now, fx ){
                            if ( fx.prop == "deg" ){ // now est deg
                                $( this ).css( "transform", "rotateY(" + now + "deg)" );
                            }
                        },
                        "complete" : function(){
                            if (  $( elem ).data( "rotateY" ) === "oui" ) {
                                rotationY( elem );
                            }
                        }
                    }
                );
            }
 
            $( ".testY" ).on({
                "mouseenter" : function( event ){
                    $( event.target ).data( "rotateY", "oui" );
                    rotationY( event.target );
                },
                "mouseleave" : function( event ){
                    $( event.target ).data( "rotateY", "non" );
                }
            });
 
            function rotation( elem ){
                $( elem ).animate(
                    { 
                        "deg" : "+=10",
                    }, 
                    {
                        "duration" : 500,
                        "easing" : "linear",
                        "step" : function( now, fx ){
                            if ( fx.prop == "deg" ){ // now est deg
                                $( this ).css( "transform", "rotate(" + now + "deg)" );
                            }
                        },
                        "complete" : function(){
                            if (  $( elem ).data( "rotate" ) === "oui" ) {
                                rotation( elem );
                            }
                        }
                    }
                );
            }
 
            $( ".test" ).on({
                "mouseenter" : function( event ){
                    $( event.target ).data( "rotate", "oui" );
                    rotation( event.target );
                },
                "mouseleave" : function( event ){
                    $( event.target ).data( "rotate", "non" );
                }
            });
 
        });
    </script>
</head>
<body>
 
    <div class="testX">101</div>
    <div class="testY">102</div>
    <div class="test">103</div>
 
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
 
 
 
    </script>
</body>
</html>

[NoSmoking]

Je pense qu'il fait allusion à un effet comme celui ci, réalisable en CSS3 d'ailleurs c'est sur cette base que fonctionne ce plugin contrairement à cet autre.

[danielhagnoul]

Le premier plugin est bien.

Flip entre deux images en CSS uniquement : http://jsfiddle.net/GpK25/1054/