FadeInOut = image qui se bloque durant l'action

**kreaseb** · 24/08/2010, 12h10

Bonjour,

J'annonce, je débute!
Mon problème est le suivant:

J'ai une image et deux fonctions : FadeIn et FadeOut associées à deux addEventListener qui les enclenches à l'aide d'un 'mouseover' 'mouseout'.

Lorsque je survole mon image et que je reste dessus, mon action FadeIn s'enclenche et va au bout du processus. Lorsque je sort de mon image l'action de Fadeout s'enclenche normalement et pareil va au bout du process.

En revanche, si je sors de l'image alors que l'action du FadeIn (par exemple) n'est pas terminé, l'action se fige - Idem pour le FadeOut- et reprend lorsque je retourne dessus.

Je souhaiterais qu'au survol le fadeIn s'enclenche et qu'à n'importe quel moment, je puisse sortir de l'image et que le FadeOut s'enclenche.

Je conçois que cela puisse sembler simple pour certain, mais je dois avouer que je galère depuis un moment.

Comment remédier au problème?
Merci à vous

voici mon code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
 
#contentImg0 {position:relative;width:90px;}
#image0 {position:absolute;}
#cacheImg0 {opacity:0.5;position:relative;}
 
</style>
<script type="text/javascript">
<!--
 
function hide(elem)
{
var Img = window.document.getElementById(elem);
Img.style.opacity = 0/100;
return Img;
 
}
 
function Fadein(elem)
{
var Img = window.document.getElementById(elem);
opacityImg = Img.style.opacity;
if (opacityImg<=1)
	{
 
	opacityImg = ((opacityImg*100)+1)/100;
	setTimeout("Fadein('" +elem+ "')",10);
	Img.style.opacity = opacityImg;
	continue;
	}
 
}
 
function Fadeout(elem)
{
var Img = window.document.getElementById(elem);
opacityImg = Img.style.opacity;
 
if ( opacityImg > 0 )
	{
 
	opacityImg = ((opacityImg*100)-1)/100;
	Img.style.opacity = opacityImg;
	setTimeout("Fadeout('" +elem+ "')",10);
	continue;
	}
}
 
function survol(event)
{
Fadein('cacheImg0');
}
 
function out(event)
{
Fadeout('cacheImg0');
}
 
 
window.onload = function()
{
document.getElementById('contentImg0').addEventListener('mouseover',survol);
document.getElementById('contentImg0').addEventListener('mouseout',out);
hide('cacheImg0');
}
 
-->
</script>
 
</head>
 
<body>
 
<div id="contentImg0">
<img id="image0" src="IMG/00.jpg" />
<img id="cacheImg0" src="IMG/couche.png" />
</div>
 
 
 
 
 
</body>
</html>

**Bovino** · 24/08/2010, 13h23

C'est normal : quand tu survoles l'image, tu déclenches ton FadeIn, mais si tu la quitte avant que le FadeIn soit terminé, le FadeIn et le FadeOut sont lancés simultanément, donc à chaque fois, le FadeIn augmente l'opacité de 0.01 et le FadeOut la diminue de 0.01, ce qui est assez ballot au final

Il faut que tu testes si un effet est en cours avant de lancer le suivant

Et au passage, les continue de ton code ne servent strictement à rien, vire-les !

Invité · 24/08/2010, 13h48

essai avec ce script je l'ai developer dernierement son avantage c'est qu'il ny a qu'une fonction qui fait le in et le out

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.Style1 {
position:absolute;
top:158px;
left:344px;
}
</style>
<script TYPE="text/javascript" LANGUAGE="JavaScript">
function fade(element,sens,vitesse){
 
if(arguments.length>=1){
this.el=typeof (arguments[0])=='string' ? document.getElementById(arguments[0]).style : document.getElementById(element.id).style
this.sens=arguments[1]
this.setvit=arguments[2]
this.sens=='plus' ? this.prog=0 : this.prog=1;
}
this.sens=='plus' ? this.prog+=0.1 : this.prog-=0.1
 
if(document.all && !window.opera){
this.el.filter = 'alpha(opacity='+(this.prog*100)+')';
} 
else{
this.el.opacity=this.prog;
}
if(this.prog>=1 && this.sens=='plus'){
return false
}
if(this.prog<=0 && this.sens=='moins'){
return false
} 
setTimeout('fade()',this.setvit);
}
</script>
</head>
<body>
<img id="image" class="Style1" src="image.png" onmouseover="fade(this,'moins',30)"onmouseout="fade(this,'plus',30)">
</body>
</html>

pout l'utiliser

onmouseout="fade(this,'plus',30)"

pour le premier parametre soit tu met this soit tu met l'id de l'element

le deuxieme c'est plus pour in et moins pour out

le troisieme c'est la vitesse

**Bovino** · 24/08/2010, 13h55

Voir aussi : Script de fading non intrusif

**kreaseb** · 24/08/2010, 14h21

Merci pour vos réponses.

J'ai tenté de tester si un effet était en cours, comme tu me l'as conseillé Bovino, et si c'était le cas je stop la boucle faite avec le setTimeout à l'aide du clearTimeout, et je lance mon Fade, mais ça ne fonctionne pas, ma logique n'est probablement pas bonne. Je vais zieuter ton lien

Merci pour ton code Mekal, je vais y jetter un oeuil, peut-être y trouverais je la solution à mon PB.

Je vous tiens au courant

**kreaseb** · 24/08/2010, 15h19

Donc oui ton script fonctionne parfaitement Mekal, merci à toi.
Il est vrai que je n'ai pas l'habitude d'utiliser l'opérateur ternaire, je vais m'y mettre sérieusement

Et wow! Bovino ,Ton objet Fading est hyper complet ! (ça fait rêver)

Merci encore

**kreaseb** · 24/08/2010, 18h12

Alors en fait Mekal, le code que tu m'as donné fonctionne sur Chrome mais pas sur Firefox. Je me demandais si tu en connaissais la raison...

FadeInOut = image qui se bloque durant l'action

JavaScript

Discussions similaires

Partager

Partager