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