Faire un Fade-In & un Fade-Out.
linux1155
Messages postés
37
Statut
Membre
-
linux1155 Messages postés 37 Statut Membre -
linux1155 Messages postés 37 Statut Membre -
Bonjour,
J'aimerais faire apparaître ma-page-web, suite à un clic sur une autre page, faire apparaître ma page en Fade-In de rien à 100%, puis lorsque l'usager clic sur un bouton, je fais un Fade-Out pour afficher une autre page. Je suis sur que c'est possible, pour l'avoir déjà vue, J'ai trouvé quelque chose en JQuery, mais je n'y connais rien, alors en Javascript serait idéal.....
J'aimerais faire apparaître ma-page-web, suite à un clic sur une autre page, faire apparaître ma page en Fade-In de rien à 100%, puis lorsque l'usager clic sur un bouton, je fais un Fade-Out pour afficher une autre page. Je suis sur que c'est possible, pour l'avoir déjà vue, J'ai trouvé quelque chose en JQuery, mais je n'y connais rien, alors en Javascript serait idéal.....
A voir également:
- Faire un Fade-In & un Fade-Out.
- Av out ✓ - Forum TV & Vidéo
- Dc in - Forum Audio
- Aux in ✓ - Forum Enceintes / HiFi
- Hdmi out - Forum Format et connectique vidéo
- A javascript error occurred in the main process - Forum Matériel & Système
En fait j'ai trouvé ce code.
<!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>Mon compte</title>
<script type="text/javascript">
var TimeToFade = 1000.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = -2;
}
else
{
element.FadeState = 2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? 1 : -1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? 1 : -1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1) {
newOpVal = 1 - newOpVal;
}
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
function retour() {
window.location.href="principal.php";
}
</script>
</head>
<body id="block" onclick=fade("block")>
<div>
<h1>Juste pour voir si ça fonctionne</h1>
<p><input type="submit" value="Retour" onclick="fade("block"); retour()"/></p>
</div>
</body>
</html>
Il ne fais pas de Fade-in de 0 à 100%, fais le fade-out, mais ne me redirige pas à principal.php.
J'ai fais plusieurs tounipette............ sans succès......... j'ai cherché autre code mais en vain.
Alors un gros HELP!
Merci.