flipcard - Enchainement des actions

**gotcha5832** · 27/04/2014, 12h57

Je travaille sur un scrpt qui me permet au survol d'une image de la remplacer avec un effet flipard.

Pour cela voici mon code de base sans effet.

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
 
<a href="http://192.168.1.104/a.html" class="product_image">
	<img class="img_first lazy" data-original="http://192.168.1.104/image1.jpg" data-original-b="http://192.168.1.104/image2.jpg"/>
</a>
[...]
$(".product_image").hover(
	function () {
		$(this).find('.img_first').attr("src",
			$(this).find('.img_first').attr("data-original-b")
		);
	}
	,
	function () {
		$(this).find('.img_first').attr("src",
			$(this).find('.img_first').attr("data-original")
		);
	}
);

Pour l'effet flipcard je me suis basé sur cela:

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
<script type="text/javascript">
	$.fn.animateRotate = function(angle, duration, easing, complete) {
	    var args = $.speed(duration, easing, complete);
	    var step = args.step;
	    return this.each(function(i, e) {
	        args.step = function(now) {
	            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
	            if (step) return step.apply(this, arguments);
	        };
 
	        $({deg: 0}).animate({deg: angle}, args);
	    });
	};
 
	$(".product_image").hover(
		function () {
			$(this).find('.img_first').animateRotate(180, 400, "",$(this).find('.img_first').delay(200).attr("src",$(this).find('.img_first').attr("data-original-b")));
		    return false;		
		}
		,
		function () {
			$(this).find('.img_first').animateRotate(-180, 400, "",$(this).find('.img_first').delay(200).attr("src",$(this).find('.img_first').attr("data-original")));
		    return false;		
		}
	);
</script>

Cependant j'ai un souci, puisque comme on peu l'imaginer je souhaite que l'image change juste au milieu de l'imation soit à 90degré
Mais je n'arrive pas
La solution actuel fonctione mais l'image ne change pas au mileu

**danielhagnoul** · 28/04/2014, 22h50

Bonsoir

Pour personnaliser une animation jQuery, il y a tout le nécessaire dans les options de .animate( properties, options )

Exemple.

Code CSS :

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

img.img_first { margin: 1.2rem; }

Code HTML :

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

1
2
3
4
5
6
7
<div>
    <a href="#" class="product_image">Hello</a>    
</div>
 
<div>
    <img class="img_first" src="../images/adoptez-le.png" data-original="../images/imageTest.png" data-original-b="../images/adoptez-le.png"/>
</div>

Code JS :

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
$( function(){
 
    $( "a.product_image" ).hover(
        function () {
            $( '.img_first' )
                .animate( { "deg" : "90" }, {
                    "step" : function( now ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this ).attr( "src", $( this ).data( "original" ) );
                    }
                }, 400 );
        },
        function () {
            $( '.img_first' )
                .animate( { "deg" : "0" }, {
                    "step" : function( now, fx ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this ).attr( "src", $( this ).data( "originalB" ) );
                    }
                }, 400 );
        }
    );
 
});

Pour tester, il suffit de copier-coller le code 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
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.1-rc2.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
            { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
img.img_first { margin: 1.2rem; }
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<div>
    <a href="#" class="product_image">Hello</a>    
</div>
 
<div>
    <img class="img_first" src="../images/adoptez-le.png" data-original="../images/imageTest.png" data-original-b="../images/adoptez-le.png"/>
</div>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", "datefr",
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
$( function(){
 
    $( "a.product_image" ).hover(
        function () {
            $( '.img_first' )
                .animate( { "deg" : "90" }, {
                    "step" : function( now ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this ).attr( "src", $( this ).data( "original" ) );
                    }
                }, 400 );
        },
        function () {
            $( '.img_first' )
                .animate( { "deg" : "0" }, {
                    "step" : function( now, fx ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this ).attr( "src", $( this ).data( "originalB" ) );
                    }
                }, 400 );
        }
    );
 
});
 
/* Fin code du test */
 
            if ( debugBool ){
               console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    ".conteneur"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>

**gotcha5832** · 29/04/2014, 10h14

Bonjour,

Merci pour de vous être penché sur mon problème.

J'avais réussit avec la solution suivante:

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
	$.fn.animateRotate = function(angle, duration, easing, complete) {
	    var args = $.speed(duration, easing, complete);
	    var step = args.step;
	    return this.each(function(i, e) {
	        args.step = function(now) {
	            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
	            if (step) return step.apply(this, arguments);
	        };
 
	        $({deg: 0}).animate({deg: angle}, args);
	    });
	};
 
	$(".product_image").hover(
		function () {
			$(this).find('.img_first').animateRotate(180, 400, "",$(this).find('.img_first').attr("src",$(this).find('.img_first').attr("data-original-b")));
		    return false;		
		}
		,
		function () {
			$(this).find('.img_first').animateRotate(-180, 400, "",$(this).find('.img_first').attr("src",$(this).find('.img_first').attr("data-original")));
		    return false;		
		}
	);

Ce qui reviens mais au même cependant, votre code est plus ""propre
En revanche je suis confronté au même souci pour adapter les deux scripts puisque j'aimerais le déroulement suivant:
rotateY(90deg) ==> nouvelle src ==> rotateY(90deg)

J'ai donc essayé:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
       function () {
            $( '.img_first' )
                .animate( { "deg" : "90" }, {
                    "step" : function( now ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "step" : function(){
                        $( this ).attr( "src", $( this ).data( "original" ) );
                    },
                    "complete" : function(){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                }, 400 );
        }

Mais il semblerais qu'il ne soit pas possible, de definir ain 2 step.

**gotcha5832** · 29/04/2014, 17h36

Nouvel essai infrecteux:

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
 
	$.fn.animateRotate = function(angle, duration, easing, complete) {
	    var args = $.speed(duration, easing, complete);
	    var step = args.step;
	    return this.each(function(i, e) {
	        args.step = function(now) {
	            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
	            if (step) return step.apply(this, arguments);
	        };
 
	        $({deg: 0}).animate({deg: angle}, args);
	    });
	};
	$(".product_image").hover(
		function () {
			var imgUrl_b;
 
 
			if ($(this).find('.img_first').attr("data-original"))
			{
				imgUrl = $(this).find('.img_first').attr("data-original");
			}else{
				imgUrl = $(this).find('.img_first').attr("src");
			}
			imgUrl_b = $(this).find('.img_first').attr("data-original-b");]
			$(this).find('.img_first')
				.animate({opacity: 0.5},10,
					function(){
	    				$(this).animateRotate(90, 400, "easeInQuart");
	               	}
	            )
	            .animate({opacity: 0.5},10,
					function(){
	    				$(this).attr("src",imgUrl_b);
	               	}
	            )
	            .animate({opacity: 1},10,
					function(){
	    				$(this).animateRotate(90, 400, "easeInQuart");
	               	}
	            )
            ;
  return false;		
		}
		,
		function () {
			$(this).find('.img_first').animateRotate(-180, 400, "easeInQuart",$(this).find('.img_first').attr("src",imgUrl));
		    return false;		
		}
	);

puis

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
 
	$.fn.animateRotate = function(angle, duration, easing, complete) {
	    var args = $.speed(duration, easing, complete);
	    var step = args.step;
	    return this.each(function(i, e) {
	        args.step = function(now) {
	            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
	            if (step) return step.apply(this, arguments);
	        };
 
	        $({deg: 0}).animate({deg: angle}, args);
	    });
	};
	$(".product_image").hover(
		function () {
			var imgUrl_b;
 
 
			if ($(this).find('.img_first').attr("data-original"))
			{
				imgUrl = $(this).find('.img_first').attr("data-original");
			}else{
				imgUrl = $(this).find('.img_first').attr("src");
			}
			imgUrl_b = $(this).find('.img_first').attr("data-original-b");]
            $(this).find('.img_first')
            .queue(function() {
			     $(this).animateRotate(90, 400, "easeInQuart");
			     $(this).attr("src",imgUrl_b);
			     $(this).dequeue();
			  })
            .queue(function() {
			     $(this).attr("src",imgUrl_b);
			     $(this).dequeue();
			  })
            .queue(function() {
			     $(this).animateRotate(180, 400, "easeInQuart");
			     $(this).dequeue();
			  });
  return false;		
		}
		,
		function () {
			$(this).find('.img_first').animateRotate(-180, 400, "easeInQuart",$(this).find('.img_first').attr("src",imgUrl));
		    return false;		
		}
	);

**gotcha5832** · 29/04/2014, 18h14

En repartant du code de @danielhagnoul

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
 
$.fn.animateRotate = function(angle, duration, easing, complete) {
		    var args = $.speed(duration, easing, complete);
		    var step = args.step;
		    return this.each(function(i, e) {
		        args.step = function(now) {
		            $.style(e, 'transform', 'rotateY(' + now + 'deg)');
		            if (step) return step.apply(this, arguments);
		        };
 
		        $({deg: 0}).animate({deg: angle}, args);
		    });
		};
 
 
		$(".product_image").hover(
			function () {
				var imgUrl_b;
 
 
				if ($(this).find('.img_first').attr("data-original"))
				{
					imgUrl = $(this).find('.img_first').attr("data-original");
				}else{
					imgUrl = $(this).find('.img_first').attr("src");
				}
				imgUrl_b = $(this).find('.img_first').attr("data-original-b");
 
	            $(this).find('.img_first')
	                .stop().animate( { "deg" : "90" }, {
	                    "step" : function( now ){
	                        $( this ).css( "transform", "rotateY(" + now + "deg)" );
	                    },
	                    "complete" : function(){
	                        $( this ).attr( "src", $( this ).data( "original-b" ) );
	                    }
	                }, 400 ).animate( { "deg" : "180" }, {
	                    "step" : function( now ){
	                        $( this ).css( "transform", "rotateY(" + now + "deg)" );
	                    }
	                }, 400 );
	        },
	        function () {
	           $(this).find('.img_first')
	                .animate( { "deg" : "90" }, {
	                    "step" : function( now ){
	                        $( this ).css( "transform", "rotateY(" + now + "deg)" );
	                    },
	                    "complete" : function(){
	                        $( this ).attr( "src", $( this ).data( "original" ) );
	                    }
	                }, 400 ).animate( { "deg" : "0" }, {
	                    "step" : function( now ){
	                        $( this ).css( "transform", "rotateY(" + now + "deg)" );
	                    }
	                }, 400 );
	        }
		);

Cependant je ne comprendn pas si passe plein de fois dessus/pas dessus, l'action se repette autant de fois malgré le .stop()
Savez vous pourquoi?

**danielhagnoul** · 29/04/2014, 23h16

Bonsoir

Voici le code de ma page de test, avec des corrections (liens vers les images, option "duration") et des améliorations (deg relatif "+=90" et "-=90").

Testez ma page et dites-moi si cela correspond plus ou moins à votre demande.

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.1-rc2.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
            { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
img.img_first { margin: 1.2rem; }
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<div>
    <a href="#" class="product_image">Hello</a>    
</div>
 
<div>
    <img class="img_first" src="http://danielhagnoul.developpez.com/images/adoptez-le.png" 
    data-original="http://danielhagnoul.developpez.com/images/imageTest.png" 
    data-original-b="http://danielhagnoul.developpez.com/images/adoptez-le.png"/>
</div>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", "datefr",
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
$( function(){
 
    // mouseenter : rotateY(+90deg) ==> nouvelle src ==> rotateY(+90deg)
    // mouseleave : rotateY(-90deg) ==> nouvelle src ==> rotateY(-90deg)
 
    $( "a.product_image" ).hover(
        function () {
            $( '.img_first' )
                .animate( { "deg" : "+=90" }, {
                    "duration" : 400,
                    "step" : function( now ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this )
                            .attr( "src", $( this ).data( "original" ) )
                            .animate( { "deg" : "+=90" }, {
                                "duration" : 400,
                                "step" : function( now ){
                                    $( this ).css( "transform", "rotate(" + now + "deg)" );
                                }
                            });
                    }
                });
        },
        function () {
            $( '.img_first' )
                .animate( { "deg" : "-=90" }, {
                    "duration" : 400,
                    "step" : function( now, fx ){
                        $( this ).css( "transform", "rotate(" + now + "deg)" );
                    },
                    "complete" : function(){
                        $( this )
                            .attr( "src", $( this ).data( "originalB" ) )
                            .animate( { "deg" : "-=90" }, {
                                "duration" : 400,
                                "step" : function( now, fx ){
                                    $( this ).css( "transform", "rotate(" + now + "deg)" );
                                }
                            });
                    }
                });
        }
    );
 
});
 
/* Fin code du test */
 
            if ( debugBool ){
               console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    ".conteneur"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>

flipcard - Enchainement des actions

jQuery

Vue hybride

Discussions similaires

Partager

Partager