Animation récalcitrante après le premier survol

sooprano · 27/11/2010, 14h01

salut j'ai exemple de image qui se defile par un bouton voici exemple

Citation:

http://www.abciweb.net/objet-defilan...e_commande.php

j'ai intégrer cet effet de zoom avec jquery

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
 <!-- menu !-->
     <div class="item">
	<a href="#"><img src="images/moncv.jpg" alt="Cycliner" title="" width="105" height="105"/></a>
  <div class="caption">
		<a href="">Mon cv</a>
		<p>Mon cv est est au format doc, téléchargeable.</p>
  </div>
  <script>
 
$(document).ready(function() {
 
	//move the image in pixel
	var move1 = -15;
 
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;
 
	//On mouse over those thumbnail
	$('.item').hover(function() {
 
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
 
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move1, 'left':move1}, {duration:200});
 
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	
 
		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
 
});
 
</script>
</div>
     <!-- fin menu !-->

le probleme c'est avant de clique sur bouton defilement l'effet zoom marche bien , apres clique l'effet ne marche plus, es ce qu'il y a un conflit ou autre chose

danielhagnoul · 28/11/2010, 00h44

Bonsoir

Un exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		.item {
			margin:24px;
			width:240px;
			border:1px solid grey;
		}
		.item a img {
			width:120px;
			height:120px;
			margin-bottom:6px;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div class="item">
	<a href="#">
		<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="Cycliner" title=""/>
	<div class="caption">
		<a href="#">Mon cv</a>
		<p>Mon cv est est au format doc, téléchargeable.</p>
	</div>
</div>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>	
		$(function(){
 
var zoom = "1.80";
 
$(".caption").hide();
 
$(".item").hover(
	function() {
		var obj = $(this),
			w = parseInt(120 * zoom, 10), // 120px la largeur de l'image
			h = parseInt(120 * zoom, 10); // 120px la hauteur de l'image
 
		// Move and zoom the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width':w,
					'height':h
				},
				200
			);
 
		// Display the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeIn(200);
	},
	function() {
		var obj = $(this),
			w = "120px", // la taille d'origine de l'image
			h = "120px"; // la taille d'origine de l'image
 
		// Reset the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width': w,
					'height': h
				},
				100
			);	
 
		// Hide the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeOut(200);
	}
);
 
		});
	</script>
</body>  
</html>

sooprano · 28/11/2010, 15h28

salut merci pour votre reponse, l'exemple que tu m'as proposer ne repond pas a mon besoin

, par contre l'effet que je veux effectuer marche tres bien

si je mes ce code en dehors de

Code :

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

<div id="images_defilant"> .....</div>

voici le code complet

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Générateur d'objets défilants www.abciweb.net</title>
<script type="text/javascript" src="js/objet_defilant.js"></script>
 
<script type="text/javascript">
<!--
function Marche_arret (id)
{
	if(typeof this.DF_ObjetParam == 'undefined' || typeof this.DF_ObjetParam[id] == 'undefined') 
		{
			DF_ObjetDefilant(id,'auto','r','g','8','0','0','500');
		}
		else
		{
			DF_ObjetSensInverse(id);
		}
}
-->
</script>
 
<script src="js/jquery-1.3.1.min.js"></script>
 
<script>
 
$(document).ready(function() {
 
	//move the image in pixel
	var move = -15;
 
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;
 
	//On mouse over those thumbnail
	$('.item').hover(function() {
 
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
 
		//Move and zoom the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
 
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	
 
		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
 
});
 
</script>
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	border: 18px solid black;
	width:600px; 
	height:467px;
	margin: 2em auto 0 auto;
	overflow: hidden;
}
.item {
	width:105px;
	height:105px;	
	border:8px solid #1a1a1a;	
	margin:0;
 
	/* required to hide the image after resized */
	overflow:hidden;
 
	/* for child absolute position */
	position: absolute;
 
	/* display div in line */
	float:left;
}
 
.item .caption {
	width:105px;
	height:105px;
	background:#000;
	color:#fff;
	font-weight:bold;
 
	/* fix it at the bottom */
	position:absolute;
	left:0;
 
	/* hide it by default */
	display:none;
 
	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */
 
}
 
.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	
 
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}
 
.item .caption p {
	padding:5px;	
	margin:0;
	font-size:10px;
}
 
.item img {
	border:0;
 
	/* allow javascript moves the img position*/
	position:absolute;
}
-->
</style>
</head><body>
 
 <div id="cadre_images">
 
  		<div id="images_defilant">
        <!-- menu !-->
        <div class="item">
	<a href="#"><img src="images/moncv.jpg" alt="Cycliner" title="" width="105" height="105"/></a>
  <div class="caption">
		<a href="">Mon cv</a>
		<p>Mon cv est est au format doc, téléchargeable.</p>
  </div>
</div>
 
 <!-- fin menu !-->
 
        <img src="images/france_17_11081g.jpg" alt="source image : http://www.panoram-art.com/" title="source image : http://www.panoram-art.com/"></div>
 </div>
 
 
<div onclick="Marche_arret('images_defilant')" onmouseover="DF_ObjetNavigMous('images_defilant','out')" onmouseout="DF_ObjetNavigMous('images_defilant','over')" style="position: relative; width: 40px; margin: auto; cursor: pointer; z-index: 10; top: -18px;"><img src="images/fleche_aller_retour_violet.png" alt="" title="" height="15" width="40">
</div>
 
</body></html>

vous pouvez telecharger l 'exemple pour voir le probleme

sooprano · 30/11/2010, 17h07

Citation:

Envoyé par danielhagnoul

Bonsoir

Un exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		.item {
			margin:24px;
			width:240px;
			border:1px solid grey;
		}
		.item a img {
			width:120px;
			height:120px;
			margin-bottom:6px;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div class="item">
	<a href="#">
		<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="Cycliner" title=""/>
	<div class="caption">
		<a href="#">Mon cv</a>
		<p>Mon cv est est au format doc, téléchargeable.</p>
	</div>
</div>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>	
		$(function(){
 
var zoom = "1.80";
 
$(".caption").hide();
 
$(".item").hover(
	function() {
		var obj = $(this),
			w = parseInt(120 * zoom, 10), // 120px la largeur de l'image
			h = parseInt(120 * zoom, 10); // 120px la hauteur de l'image
 
		// Move and zoom the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width':w,
					'height':h
				},
				200
			);
 
		// Display the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeIn(200);
	},
	function() {
		var obj = $(this),
			w = "120px", // la taille d'origine de l'image
			h = "120px"; // la taille d'origine de l'image
 
		// Reset the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width': w,
					'height': h
				},
				100
			);	
 
		// Hide the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeOut(200);
	}
);
 
		});
	</script>
</body>  
</html>

j'arrive pas encore a trouver ou ce trouve le probleme

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
<script type="text/javascript" src="js/objet_defilant.js"></script>
 
<script type="text/javascript">
<!--
function Marche_arret (id)
{
	if(typeof this.DF_ObjetParam == 'undefined' || typeof this.DF_ObjetParam[id] == 'undefined') 
		{
			DF_ObjetDefilant(id,'auto','r','g','8','0','0','500');
		}
		else
		{
			DF_ObjetSensInverse(id);
		}
}
-->
</script>
 
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	border: 18px solid black;
	width:600px; 
	height:467px;
	margin: 2em auto 0 auto;
	overflow: hidden;
}
 
/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		.item {
			margin:24px;
			width:240px;
			border:1px solid grey;
		}
		.item a img {
			width:120px;
			height:120px;
			margin-bottom:6px;
		}
-->
</style>
</head><body>
 
 <div id="cadre_images">
 
  		<div id="images_defilant">
        <!-- menu !-->
       <h1>Forum jQuery</h1>
 
 
<div class="item">
	<a href="#">
		<img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="Cycliner" title=""/>
	<div class="caption">
		<a href="#">Mon cv</a>
		<p>Mon cv est est au format doc, téléchargeable.</p>
	</div>
</div>
 
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>	
		$(function(){
 
var zoom = "1.80";
 
$(".caption").hide();
 
$(".item").hover(
	function() {
		var obj = $(this),
			w = parseInt(120 * zoom, 10), // 120px la largeur de l'image
			h = parseInt(120 * zoom, 10); // 120px la hauteur de l'image
 
		// Move and zoom the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width':w,
					'height':h
				},
				200
			);
 
		// Display the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeIn(200);
	},
	function() {
		var obj = $(this),
			w = "120px", // la taille d'origine de l'image
			h = "120px"; // la taille d'origine de l'image
 
		// Reset the image
		obj
			.find('img')
			.stop(false,true)
			.animate(
				{
					'width': w,
					'height': h
				},
				100
			);	
 
		// Hide the caption
		obj
			.children('.caption')
			.stop(false,true)
			.fadeOut(200);
	}
);
 
		});
	</script>
 
 <!-- fin menu !-->
 
        <img src="images/france_17_11081g.jpg" alt="source image : http://www.panoram-art.com/" title="source image : http://www.panoram-art.com/"></div>
 </div>
 
 
<div onclick="Marche_arret('images_defilant')" onmouseover="DF_ObjetNavigMous('images_defilant','out')" onmouseout="DF_ObjetNavigMous('images_defilant','over')" style="position: relative; width: 40px; margin: auto; cursor: pointer; z-index: 10; top: -18px;"><img src="images/fleche_aller_retour_violet.png" alt="" title="" height="15" width="40">
</div>

si tu essey le code, l'effet marche tres bien, mais si je surovle sur la fleche au dessous puis j y vais sur l'effet zoom, la ou il marche pas

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email