Effet fondu ne fonctionne que dans un sens

Version imprimable

Bonjour,
J'ai essayé de créer un effet de fondu et j'ai réussi mais rien que dans un sens. D'opaque à transparent, c'est niquel mais inversément ça ne fonctionne pas et je vois pas mon erreur. Voici mon code:

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<script type="text/javascript">
var opacity = 0;
var timer;
function Opacity() {
        opacity += 0.1;
        document.getElementById('slogan').style.opacity += 0.1;
        if (opacity == 1) {
                clearInterval(timer);
        }
}
function Fade() {
        timer = setInterval('Opacity()', 1000);
}
</script>
</head>
<body>
<div id="template">
<div id="header">
<h1>Poute</h1>
<p id="slogan" style="opacity: 0">Un blog pas comme les autres !</p>
<script type="text/javascript">Fade();</script>
</div>
<form action="index.php" method="post">
        <label for="utilisateur">Pseudo</label><input type="text" name="user" />
        <label for="motdepasse">Mot de passe</label><input type="text" name="password" />
        <input type="submit" value="Se connecter" />
</form>
</div>
</body>
</html>

Merci.

20/01/2008, 21h47
jln13
salut,

tu as un problème car tu mélange des string avec des nombres.

Du coup cette ligne :

Citation:

document.getElementById('slogan').style.opacity += 0.1;

te donne :

0.10.10.10.10.1

Il faut que tu gères les types pour que l'addition ne se transforme pas en concaténation :
Code:

1 2 3 opac = parseFloat(document.getElementById('slogan').style.opacity)+0.1; document.getElementById('slogan').style.opacity = opac;

Code:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Fading Pic</title>
</head>
 
<body>
<img id="spaffySpecial" src="lungs.gif" width=116 height=123 style="-moz-opacity:0;filter:alpha(opacity=0)">
<br/>
Opacité : <input type='text' id='result' style="width:40px;text-align:right;" />
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("spaffySpecial");
 
function fadePic(){		
				if (opacite<max && up){opacite+=2;}
				if (opacite>min && !up){opacite-=2;}
				if (opacite>=max){up=false;}
				if (opacite<=min){up=true;}
 
IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("spaffySpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)
 
</script>
</body>
</html>

celui-ci est au moins crossbrowser ...